troubles with jQuery mouseleave

Question

I am trying to create a menu with this structure:

<ul id="primary" class="menuOptions">
     <li>Item 1</li>
     <li>Item 2
         <div id="secondary">
            <ul class="menuOptions">
               <li>subItemOne</li>
               <li>subItemTwo</li>
           </ul>
         </div>
     </li>
     <li>Item 3</li>
</ul>

I am animating it with this script:

$j('.menuOptions li').each(function(i){
//applies to all menu options
    $j(this)
   .bind('mouseover',function() {
          $j(this).toggleClass("over");
       })
       .bind('mouseleave',function() {
          $j(this).toggleClass("over");
       });         
  });

I am finding that the toggleClass function is being called on the primary menu item as the mouse moves over the secondary menu items. I know that mouseleave is not supposed to be called until the mouse is off the children as well, so I am confused.

Do I need to actively stop event propagation somehow?

Thanks!

Tim

Answer 1

Can you try with just using the hover function.

$j('ul.menuOptions li').hover(function(){
          $j(this).toggleClass("over");
       } ,
       function() {
          $j(this).toggleClass("over");
       }
);

Answer 2

I suspect your problem was that you were coupling mouseover with mouseleave.

See http://api.jquery.com/category/events/mouse-events/

In general, you want to couple mouseenter with mouseleave, and mouseover with mouseout. mouseover and mouseout are older events which, while still occassionally useful, are generally inferior to mouseenter and mouseleave.

hover is exactly equivalent to using mouseenter and mouseleave.