JQuery Hover Tip

Question

J'essaie de modifier le script suivant pour afficher/masquer le conseil uniquement lorsque le "?" est plané sur et non l'ensemble "li" Bloc

Le code HTML:

<ul class="tips"> 
<li> 
    <a href="#" class="tooltip">?</a> Feature 1 
    <div class="tip"> 
    <h4>Tip Title 1</h4> 
    <h4>Tip Q</h4> 
    <p>Tip A</p> 
    </div> 
</li> 
<li> 
    <a href="#" class="tooltip">?</a> Feature 2 
    <div class="tip"> 
    <h4>Tip Title 2</h4> 
    <h4>Tip Q</h4> 
    <p>Tip A</p> 
    </div> 
</li> 
<li> 
    <a href="#" class="tooltip">?</a> Feature 3 
    <div class="tip"> 
    <h4>Tip Title 3</h4> 
    <h4>Tip Q</h4> 
    <p>Tip A</p> 
    </div> 
</li> 
</ul> 

Le script JQuery

$("ul.tips li").hover(function() { 
    $(this).find("div").stop() 
    .fadeIn() 
    .css("display","block") 

}, function() { 
    $(this).find("div").stop() 
    .fadeOut() 
}); 

Le CSS:

.tips div { 
display: none; 
position: absolute; 
bottom: 0; 
width: 100%; 
height;auto; 
background: #e00; 
left:0; 
}​​​​​​​​​ 

J'ai essayé de modifier le script comme si

$("ul.tips li a").hover(function() { 

donc il cible le "a" tag mais le finit par ne rien montrer.

Answer 1

Vous devez mettre fin à vos lignes de js:

$("ul.tips li a").hover(function() { 
    $(this).siblings("div.tip").stop() 
    .fadeIn() 
    .css("display","block"); // <-- gotta put the semi-colon 

}, function() { 
    $(this).siblings("div.tip").stop() 
    .fadeOut(); //<-- here too 
}); 

Answer 2

qui semble inhabituel car il semble que cela devrait fonctionner, mais essayez:

$(".tooltip").hover(function() { ... }); 

Vous devez également modifier le $(this).find("div")...-$(this).next()...

Answer 3

Vous devez vous assurer que vous enveloppez votre gestionnaire d'événements dans la fonction de préparation de document d'in jQuery:

$(document).ready(function() { 
$("ul.tips li").hover(function() { 
    $(this).find("div").stop() 
    .fadeIn() 
    .css("display","block") 

}, function() { 
    $(this).find("div").stop() 
    .fadeOut() 
}); 
}); 

Votre événement hover ne se lie pas aux éléments html à moins que les éléments HTML ont été chargés dans l'arborescence DOM déjà. $(document).ready() retarde l'exécution du JS inclus dans la fonction anonyme transmise jusqu'à ce que le reste du document html soit chargé et que l'arborescence DOM soit prête.

Plus lecture à: http://docs.jquery.com/Tutorials:Introducing_$(document).ready()