JSFiddle - React, Tailwind, and code Playground

by TrueBlueAussie

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; text: 'Content'; }

JavaScript

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