jquery firing mouse out for ul when navigating between li

javascript, jquery, list, mouse

Solution

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

Problem

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?

Original source