javascript - jquery firing mouse out for ul when navigating between li - Stack Overflow

admin管理员组

文章数量:1356522

I have an html page that has a list

<ul id="mylist">
  <li><a href="#">item 1</a></li>
  <li><a href="#">item 2</a></li>
</ul>

Then some jquery code to fire an event on mouse out of the list

$('#mylist').mouseout(function(evt) {
    $(this).fadeOut('fast');
});

The problem is that when I move the mouse between item1 and item2 (vertically starting at item1 and moving down to item2), the mouse out fires (and $this is referencing the ul). Why would the ul be firing an event even though I don't think I've left the list?

I have an html page that has a list

<ul id="mylist">
  <li><a href="#">item 1</a></li>
  <li><a href="#">item 2</a></li>
</ul>

Then some jquery code to fire an event on mouse out of the list

$('#mylist').mouseout(function(evt) {
    $(this).fadeOut('fast');
});

The problem is that when I move the mouse between item1 and item2 (vertically starting at item1 and moving down to item2), the mouse out fires (and $this is referencing the ul). Why would the ul be firing an event even though I don't think I've left the list?

• javascript
• jquery
• list
• mouse

Share Improve this question Follow asked Dec 4, 2012 at 1:20 Jeff StoreyJeff Storey 57.2k7575 gold badges242242 silver badges413413 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 10

Maybe you'll want to use mouseenter / mouseleave instead of mouseover / mouseout.

I believe this is due to "event bubbling" of JavaScript. Events of li are bubbled up to ul. Read more about this here: http://www.quirksmode/js/events_order.html

This is may not be a direct answer to the question, but I believe it something any JS developer should know.

I think that is because you are binding mouseout to a , mouseovering its children (

) will trigger a mouseout (if I am correct). As Aesthete mentioned, wrapping it with a div and bind mouseover to that div is more simple and straight forward to do.

本文标签： javascriptjquery firing mouse out for ul when navigating between liStack Overflow

版权声明：本文标题：javascript - jquery firing mouse out for ul when navigating between li - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1743987903a2571606.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。