¿Cómo deshabilitar los eventos de mouseout activados por elementos secundarios?

Este dilema se puede solucionar de diferentes maneras, pero nosotros te compartimos la respuesta más completa para nosotros.

Solución:

La pregunta es un poco vieja, pero me encontré con esto el otro día.

La forma más sencilla de hacer esto con versiones recientes de jQuery es usar el mouseenter y mouseleave eventos en lugar de mouseover y mouseout.

Puede probar el comportamiento rápidamente con:

$(".myClass").on( 
   'mouseenter':function()  console.log("enter"); ,
   'mouseleave':function()  console.log("leave"); 
);

En aras de la simplicidad, simplemente reorganizaría el html un poco para colocar el contenido recién mostrado dentro del elemento al que está vinculado el evento de mouseover:

  Hover Me
  

    Test
    
      Option 1
      Option 2
    
  

Entonces, podrías hacer algo como esto:

$('#hoverable').hover( function()  $(this).find("div").show(); ,
                       function()  $(this).find("div").hide();  );

---

Nota: no recomiendo CSS en línea, pero se hizo para que el ejemplo fuera más fácil de digerir.

Sí, chicos, usen .mouseleave en lugar de .mouseout:

$('div.sort-selector').mouseleave(function() 
    $(this).hide();
);

O incluso usarlo en combinación con live:

$('div.sort-selector').live('mouseleave', function() 
    $(this).hide();
);

Te mostramos reseñas y calificaciones

Eres capaz de añadir valor a nuestra información colaborando tu veteranía en las referencias.

---

---

Utiliza Nuestro Buscador