JSFiddle - React, Tailwind, and code Playground

by TrueBlueAussie

HTML

<ul>
    <li><a href="#" data-content="About me!">About</a></li>
    <li><a href="#" data-content="My home!">Home</a></li>
</ul>

CSS

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

JavaScript

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