Hover acting weird in IE

Question

Have a look at this HTML code:

<div class="overlay">
    <a href="#">1</a>
    <a href="#">1</a>
    <a href="#">1</a>
    <a href="#">1</a>
    <a href="#">1</a>
</div>

and this jQuery code:

$('div.overlay').mouseenter(function() { clearTimeout(thumbsAway); });
$('div.overlay').mouseleave(function() { clearTimeout(thumbsAway); $('ul.thumbs').animate({top: '520px'}, 750); });

The problem is that in IE, hovering on any child element will also trigger mouseenter/mouseleave. How can I prevent this?

Answer 1

You can use event.stopPropagation()

$('div.overlay').hover(function(event){
    event.stopPropagation();
    clearTimeout(thumbsAway);
  },
  function(event){
    event.stopPropagation();
    clearTimeout(thumbsAway);
  }
);

Or check the target of the event.

$('div.overlay').hover(function(event){
    if (this == event.target){clearTimeout(thumbsAway);}
  },
  function(event){
    if (this == event.target){clearTimeout(thumbsAway);}
  }
);

Answer 2

Try stopping the event propogation with stopPropogation() :

$('div.overlay').mouseenter(function(e) {
  e.stopPropogation();
  clearTimeout(thumbsAway);
});

---

Description: Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.