JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head></head>
<body>
    <ul id="foo" style="border:solid 1px red;">
        <li>hop</li>
        <li>hop</li>
        <li>hop</li>
        <li>hop</li>
        <li>hop</li>
        <li>hop</li>
        <li>hop</li>
        <li>hop</li>
        <li>hop</li>
        <li>hop</li>
        <li>hop</li>
    </ul>
    <div id="bar">lkjlkj</div>
</body>
</html>

CSS

#foo li {
    opacity:0;
}

JavaScript

$(document).ready(function() {
    $("#foo li").hover(
        function(){$(this).css({opacity:0})},
        function(){$(this).css({opacity:1})}
    );            
});