Jquery - Comment réparer ce survol d'image?

Question

Salut les gars Je possède ce petit script JQuery: link text

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

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

Je fonctionne très bien, mais je veux être en mesure de planer sur le texte situé dans l'image, chaque fois que je, il garde juste « rebondir »

Toute aide est très appréciée, merci , Keith

Answer 1

Bonne question.

Le problème semble être que lorsque la souris est sur le paragraphe, la souris n'est plus sur l'image. Donc le paragraphe est caché. Lorsque le paragraphe est masqué, la souris est à nouveau sur l'image, et le paragraphe est à nouveau affiché. Et ainsi de suite ...

Une bonne solution consiste à utiliser mouseenter et mouseLeave événements au lieu de mouseover et mouseout:

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

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

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

}); 

La principale différence entre mouseenter/mouseLeave événements et /mouseover mouseout événements est que les premiers ne font pas de bulles.

Dans cet exemple, le paragraphe enfant de div # image continue de recevoir les événements mouseenter/mouseleave (même si vous ne les écoutez pas) mais les événements n'apparaîtront pas jusqu'à leur élément parent. Voir this page avant une discussion prolongée à ce sujet.

Vous ne devez également plus affecter l'événement à la balise img, mais à la div. Ça ne devrait pas être un problème.