jquery si mouseover

Question

J'ai un img avec une fonction de survol pour révéler un élément. Une partie de ce nouvel élément chevauche l'img, donc si je passe la souris sur le nouvel élément, parce que le curseur n'est plus sur l'img, l'élément se cache et réapparaît instantanément parce que le curseur est de nouveau sur l'img. J'ai besoin d'ignorer la commande mouseout si le curseur est sur le img qui est dans le nouvel élément (la seule partie du nouvel élément qui chevauche l'image principale).

Il est une question délicate à expliquer, mais voici le code:

jquery (avec peu je ne suis pas sûr de savoir comment faire)

$("div > img").hover(function() { 

     $(this).parent().find("span").slideDown(100); 

    }, function() { 

     if (user is hovering over the span) { 
        // do nothing 
     } else { 
      $(this).parent().find("span").slideUp(100); 
     } 
    }); 

html

<div> 
    <img src="/images/icons/dm.jpg" width="54" height="54" /> 
    <span><strong>Test</strong><br />test2<img src="/images/arrow.png" width="19" height="17" /></span> 
</div> 

Answer 1

Un beaucoup plus facile approche serait juste avoir le .hover() sur ce parent <div> comme ceci:

$("div").hover(function() { 
    $(this).find("span").slideDown(100); 
}, function() { 
    $(this).find("span").slideUp(100); 
}); 

Puisque vous ne voulez effectivement affecter le <span> en vol stationnaire au-dessus de la <div> (où seule la <img> est d'abord visible) ... il est plus logique de coller votre gestionnaire là-bas, vous voyez comment beaucoup plus simple que le code soit:) Je donnerais juste <div> une classe que vous pouvez utiliser dans un sélecteur (pour le rendre plus spécifique) et vous êtes tous ensemble.

Answer 2

Voici une tentative de ce que vous décrivez

http://www.jsfiddle.net/gaby/cQxVv/

mais la solution est @Nicks façon plus élégante.