Question

I’ve got a div being animated on hover (I’m using jquery’s .hover() method). The div contains a form with a select. Opening the select and hovering on the options makes IE9 interpret it as having “un-hovered” the parent div, causing the second hover animation to fire . You can see it here:

http://www.oliveboutiquehotelpr.com/temp/

Any ideas on how to avoid that? It works fine in all other major browsers.

Sorry about that, here’s a jsFiddle: http://jsfiddle.net/jun6g/1/

Answer 1

by adding a variable that reflects the focus of the select and checking that everytime it wants to animate, I have fixed your problem. Javascript code here (JSFiddle)

Update

I have fixed the issue where the select has problems again after you’ve opened it and closed it by burring the select when the box closes. The code and link have been updated.

  var selectfocused = false;
  $('#block-block-5').mouseover(function () {
      selectfocused = false;
  });
  $('#block-block-5 select').focus(function () {
      selectfocused = true;
  }).blur(function () {
      selectfocused = false;
  });
  $('#block-block-5').hover(function () {
      if (selectfocused == false) {
          console.log(selectfocused);
          $(this).stop().animate({
              top: 0,
              opacity: 1
          });
      }
  }, function () {
      if (selectfocused == false) {
          $('#block-block-5 select').blur();
          $(this).stop().animate({
              top: -294,
              opacity: 0.6
          });
      }
  });

Happy Coding!