javascript - text on anchor changes when hover -

is possible change content of anchor when hovered? have sample fiddle want change anchor bio when hovered. , else home. content attribute doesn't seem work this.

html:

<ul>     <li><a href="#">about</a></li>     <li><a href="#">home</a></li> </ul> 

css:

ul { list-style: none; } ul li a:hover { color: red; content: 'content'; } 

"content property used :before , :after pseudo-elements, insert generated content." not normal elements.

reference: http://www.w3schools.com/cssref/pr_gen_content.asp

you can change using jquery:

$('li a').mouseenter(function(){     $(this).data('text', $(this).text());     $(this).text('content'); }).mouseleave(function(){     $(this).text($(this).data('text')); }); 

http://jsfiddle.net/trueblueaussie/s6ao29eg/2/

this version saves text data on element on mouseenter, , restores on mouseleave. can use hover passing same 2 functions.

e.g.

$('li a').hover(function(){     $(this).data('text', $(this).text()).text('content'); }, function(){     $(this).text($(this).data('text')); }); 

jsfiddle: http://jsfiddle.net/trueblueaussie/s6ao29eg/5/

i notice several other clever css-only solutions have been provided, choice depends on how can change content, vs adding code.

if want different text, use data attribute:

<li><a href="#" data-content="about me!">about</a></li> 

e.g.

$('li a').hover(function(){     $(this).data('text', $(this).text()).text($(this).data('content')); }, function(){     $(this).text($(this).data('text')); }); 

jsfiddle: http://jsfiddle.net/trueblueaussie/s6ao29eg/8/

update use transition (fade) requested:

$('li a').hover(function(){     $(this).stop(true,true).fadeout(function(){        $(this).data('text', $(this).text()).text($(this).data('content')).fadein();     }); }, function(){     $(this).stop(true,true).fadeout(function(){         $(this).text($(this).data('text')).fadein();     }); }); 

jsfiddle: http://jsfiddle.net/trueblueaussie/s6ao29eg/10/

further update rules have changed :)

as html content apparently cannot modified, use index position of li combined array of text items:

var content = ["about me!", "my home!"]; $('li').hover(function(){     var $a = $('a', this);     $a.stop(true,true).fadeout(function(){        $a.data('text', $a.text()).text(content[$(this).index()]).fadein();     }); }, function(){     var $a = $('a', this);     $a.stop(true,true).fadeout(function(){         $a.text($a.data('text')).fadein();     }); }); 

jsfiddle: http://jsfiddle.net/trueblueaussie/s6ao29eg/11/

credit @mariamadalina used array before knowing html not modified :)