problèmes avec jQuery mouseLeave

Question

Je suis en train de créer un menu avec cette 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> 

J'Animer avec ce 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"); 
     });     
    }); 

Je trouve que la fonction toggleClass est appelée sur l'élément de menu principal lorsque la souris se déplace sur les éléments de menu secondaires. Je sais que le mouseleave n'est pas censé être appelé jusqu'à ce que la souris soit aussi hors des enfants, donc je suis confus. Ai-je besoin d'arrêter activement la propagation d'un événement d'une manière ou d'une autre?

Merci!

Tim

Answer 1

Pouvez-vous essayer simplement en utilisant la fonction de survol.

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

Answer 2

Je soupçonne que le problème est que vous couplage souris sur avec souris laisser.

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

En général, les raccords que vous voulez sont:

• souris entrer avec souris laisser
• souris sur avec souris sortie.

L'utilisation d'autres combinaisons peut entraîner un comportement indésirable. souris sur et souris sur sont des événements plus anciens qui, tout en temps en temps utile, sont généralement inférieurs à souris entrer et souris laisser.

Vous pouvez également essayer de simplement les choses en utilisant vol stationnaire, est exactement équivalent à l'aide de la souris entrer et souris laisser.