CODEWITHSUNDEEP
javascriptjquery
tbleckert
tbleckert

Reputation: 3803

Hover acting weird in IE

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?

Upvotes: 0

Views: 135

Answers (2)

user479947
user479947

Reputation:

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);}
  }
);

Upvotes: 1

Sarfraz
Sarfraz

Reputation: 382656

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.

Upvotes: 0

Related Questions