trigger - Jquery: ¿Cómo soluciono esta imagen volcada?

mouseleave jquery

Question

Hola chicos, tengo este pequeño script de Jquery: texto del enlace

$(document).ready(function() 
{
      $(''#image p'').hide();

      $(''img'').hover(function()
      {
            $(''#image p'').show(200); 
      }, function()
      {
            $(''#image p'').hide(200); 
      });
}); 

Funciono bien, pero quiero poder desplazarme sobre el Texto ubicado en la Imagen, cada vez que lo intento, simplemente "rebota"

Cualquier ayuda es muy apreciada, gracias, Keith

Answer 1

Buena pregunta.

El problema parece ser que cuando el mouse está sobre el párrafo, el mouse ya no está sobre la imagen. Entonces el párrafo está oculto. Cuando el párrafo está oculto, el mouse vuelve a estar sobre la imagen, por lo que el párrafo se muestra nuevamente. Y así...

Una buena solución es usar mouseenter y mouseleave events en lugar de mouseover y mouseout:

$(document).ready(function(){
    $(''#image p'').hide();

    $(''#image'').bind("mouseenter", (function(){
        $(''#image p'').show(200)
     }));

    $(''#image'').bind("mouseleave", (function(){
        $(''#image p'').hide(200)
     }));

});

La principal diferencia entre los eventos mouseover / mouseleave y los eventos mouseover / mouseout es que los primeros no hacen burbujas.

En este ejemplo, el párrafo secundario de la imagen div # aún recibe los eventos mouseenter / mouseleave (incluso si no los está escuchando), pero los eventos no aparecerán en su elemento padre. Ver esta página antes de la discusión extendida sobre él.

También debe asignar el evento no más a la etiqueta img, sino a la div contenida. No deberia ser un problema.