jquery firing mouse out for ul when navigating between li

Question

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?

Answer 1

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