événements de souris personnalisés sur les liens

Question

Please see this fiddle

Si vous passez votre souris exactement sur le lien, un autre lien apparaît. Mais un texte différent apparaît également lorsque vous passez la souris sur la gauche ou la droite du lien. Je veux faire l'effet de hover seulement quand il est plané sur le lien exact.

Comment est-ce que je peux faire ceci?

Mon code HTML:

<ul id="nav"> 
    <li id="a1"><a href="#">original link 1</a></li> 
    <li id="a2" class="hack"><a href="#">hover link 1</a></li> 
    <li id="b1"><a href="#">original link 2</a></li> 
    <li id="b2" class="hack"><a href="#">hover link 2</a></li> 
    <li id="c1"><a href="#">original link 3</a></li> 
    <li id="c2" class="hack"><a href="#">hover link 3</a></li> 
</ul> 

Mon code Javascript:

$('.hack').hide(); 
$("#nav li").mouseenter(function() { 
    $('#' +this.id.charAt(0)+"2").show(); 
    $('#' +this.id.charAt(0)+"1").hide(); 
    }).mouseleave(function() { 
    $('#' +this.id.charAt(0)+"1").show(); 
    $('#' +this.id.charAt(0)+"2").hide(); 
    }); 

S'il vous plaît voir le violon pour voir l'effet que je fais allusion.

Answer 1

Effectuez les actions suivantes:

$('.hack').hide(); 
$("#nav li a").mouseenter(function() { 
    $('#' +this.parentNode.id.charAt(0)+"2").show(); 
    $('#' +this.parentNode.id.charAt(0)+"1").hide(); 
    }).mouseleave(function() { 
    $('#' +this.parentNode.id.charAt(0)+"1").show(); 
    $('#' +this.parentNode.id.charAt(0)+"2").hide(); 
}); 

Vous voulez pour initier les événements hover sur les étiquettes a plutôt que sur les li eux-mêmes.

EXAMPLE

Answer 2

Au lieu d'utiliser événement mouseenter raccourci, il serait mieux si vous utilisez la délégation d'événements et ajouter un événement sur l'élément "a" comme ça ...

$("#nav li").on({ 
    "mouseenter" : function() { }, 
    "mouseleave" : function() { } 
}, "a"); 

Answer 3

Je suppose que je mis à jour le violon. Je viens d'ajouter ce style:

#nav li { 
    display: inline-block; 
} 

Answer 4

Dans votre js, lier votre fonction à la place "#nav li a".