CODEWITHSUNDEEP
javascriptjquery
user1477567
user1477567

Reputation: 145

How to make IE9 respect jquery hover()

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/

Upvotes: 1

Views: 1122

Answers (2)

Kevin Pei
Kevin Pei

Reputation: 5872

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!

Upvotes: 4

Vinyl Windows
Vinyl Windows

Reputation: 503

There is not select on this page. Anyway, there is no hover for select elements.

Upvotes: 0

Related Questions