JSFiddle - React, Tailwind, and code Playground

by bluey

HTML

<body>
<ul>
<li>Milk</li>
<li>Bread</li>
<li class='fade'>Chips</li>
<li class='fade'>Socks</li>
</ul>

CSS

ul { margin-left:20px; color:blue; }
li { cursor:default; }
span { color:red; }

JavaScript

$("li").hover(
function () {
$(this).append($("<span> ***</span>"));
},
function () {
$(this).find("span:last").remove();
}
);
//li with fade class
$("li.fade").hover(function(){$(this).fadeOut(100);$(this).fadeIn(500);});