Changing text in hover with jQuery

Question

I am trying to change a navigation item from 'ME' to <ME> using jQuery. Here is what I'm trying: JSBin example

However, it constantly hides my original text. Does anyone have an idea of ​​what I'm doing wrong? (I am super new to jQuery / JS in general)

Answer 1

Demo

Try it. I edited your 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. Thank you.

Answer 2

The classic case is no js required , you can use CSS pseudo-classes, in particular:

• :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

I agree with @Nirazul, if possible, go for a clean css solution.

If you cannot, just remember that you:

• getting value a of attribute li
• replace the link text inside the selected one with its contents
• change operation to handlerOut

So:

 $( 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')); } ); }); 

Updated example .