jQuery Comment affecter un seul élément sur mouseOver

Question

Comme je suis encore en train d'apprendre, cette question peut sembler être très simple à répondre, mais je dois encore demander.

Comment ai-je besoin de modifier ce script pour qu'il n'affiche pas toutes les info-bulles?

Ce qui se passe est maintenant chaque fois que je passe la souris sur .pink-nose a tous les .tooltip sont entrée en fondu à ce même temps

$(function(){ 
     var pn = $('.pink-nose a') 
     var tp = $('.pink-nose .tooltip') 

     tp.css({'display':'none'}) 
     pn.mouseover(function(){ 
      tp.fadeIn()    
     }) 
    }) 

Merci pour votre aide à l'avance

Answer 1

Au lieu d'utiliser tp dans la fonction de gestion, vous devriez commencer par this (l'élément qui a été survolé), et traverser jusqu'à son info-bulle. Quelque chose comme ceci:

$(function(){ 
    $('.pink-nose .tooltip').hide(); 

    $('.pink-nose a').mouseover(function(){ 
     $(this).parents('.pink-nose:first').find('.tooltip').fadeIn(); 
    }) 
}) 

Le parcours exact dépendra de la structure de votre balisage, jetez un oeil à la jQuery documentation for Traversing de comprendre ce qui fonctionnera le mieux.

Answer 2

$('.pink-nose .tooltip').hide().each(function() { 
    var $this = $(this); 
    $this.parents('a').mouseover(function() { 
     $this.fadeIn(); 
    }); 
});