JSFiddle - React, Tailwind, and code Playground

by kvazarmw

HTML

<div style="height: 77px">
       <div class="hover">hover</div>
   </div>
   
   <hr>
   
   <ul>
       <li class="hover-li">ich 1</li>
       <li class="hover-li">ich 2</li>
       <li class="hover-li">ich 3</li>
       <li class="hover-li">ich 4</li>
       <li class="hover-li">ich 5</li>
   </ul>

CSS

.hover {
            width: 300px;
            height: 77px;
            line-height: 77px;
            text-align: center;
            border: 1px solid #ddd;
            font-size: 27px;
            display: none;
        }
        
        li {
            cursor: pointer;
        }

JavaScript

$('ul .hover-li').on('mouseenter', function () {
            $('.hover').fadeIn();
            
        }).on('mouseleave', function () {
            $('.hover').fadeOut();
            
        });