problemas con jQuery mouseleave

Question

Estoy intentando crear un menú con esta estructura:

<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>

Lo estoy animando con este 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");
       });                  
  });

Estoy descubriendo que la función toggleClass se llama en el elemento del menú principal cuando el mouse se mueve sobre los elementos del menú secundario. Sé que no se debe llamar a mouseleave hasta que el mouse también esté fuera de los niños, así que estoy confundido.

¿Debo detener activamente la propagación de eventos de alguna manera?

¡Gracias!

Tim

Answer 1

¿Puedes probar con solo usar la función de desplazamiento?

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

Answer 2

Sospecho que el problema era que estaba uniendo mouseover con mouseleave .

Ver http://api.jquery.com/category/events/mouse -eventos /

En general, los acoplamientos que desea son:

• mouseenter con mouseleave
• mouseover con mouseout .

El uso de otras combinaciones puede provocar un comportamiento no deseado. mouseover y mouseout son eventos más antiguos que, aunque en ocasiones son útiles, generalmente son inferiores a mouse enter y mouseleave .

También puedes intentar simplificar las cosas usando hover , es exactamente equivalente a usar mouseenter y mouse salir .