Modifier texte sur Hover en utilisant JQuery

Question

Je suis en train de changer un élément de navigation de « ME » à <ME> sur vol stationnaire à l'aide JQuery. Voici ce que j'essaie: JSBin example

Cependant, il est en permanence cacher mon texte original. Est-ce que quelqu'un a une idée de ce que je fais mal? (Je suis super nouvelle pour JQuery/JS en général)

Answer 1

DEMO

essayer. J'ai modifié votre code

$(function() { 
    var text; 
    $("#topnav li ").hover(
    function() { 
     text=$(this).find("a").text(); 
    $(this).find("a").text($(this).attr('full')); 
    }, 
    function() { 
     $(this).find("a").text(text); 
    } 
); 
}); 

Hope this helps vous

Answer 2

Cas classique de no js required, vous pouvez utiliser des classes CSS pseudo, spécifiquement:

• :hover
• :before
• :after

Example

li a:before { 
    content: "<"; 
    display: none; 
} 

li a:after { 
    content: ">"; 
    display: none; 
} 

li a:hover:before { 
    display: inline; 
} 

li a:hover:after { 
    display: inline; 
} 

Answer 3

Merci Je suis d'accord avec @Nirazul, si vous pouvez, optez pour une solution pure css.

Si vous ne pouvez pas, rappelez-vous que vous êtes:

1. obtenir la valeur d'un attribut a la li
2. remplaçant le texte du lien à l'intérieur de la li sélectionné avec son contenu
3. inverser l'opération sur handlerOut

Alors:

$(function() { 
    $("#topnav li").hover(
    function() { 
     var myLi = $(this); 
     myLi.attr('small', $('a', myLi).text()); 
     $('a', myLi).text(myLi.attr('full')); 
    }, 
    function() { 
     var myLi = $(this); 
     $('a',myLi).text(myLi.attr('small')); 
    } 
); 
}); 

Mise à jour example.