CODEWITHSUNDEEP
jquerymouseleave
Tim Sheiner
Tim Sheiner

Reputation: 3313

troubles with jQuery mouseleave

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

Upvotes: 1

Views: 5947

Answers (2)

Jude Allred
Jude Allred

Reputation: 11067

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

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

In general, the couplings you want are:

  • mouseenter with mouseleave
  • mouseover with mouseout.

Using other combinations can result in undesired behavior. mouseover and mouseout are older events which, while still occasionally useful, are generally inferior to mouseenter and mouseleave.

You can also try to simply things by using hover, is exactly equivalent to using mouseenter and mouseleave.

Upvotes: 3

redsquare
redsquare

Reputation: 78687

Can you try with just using the hover function.

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

Upvotes: 4

Related Questions