JSFiddle - React, Tailwind, and code Playground

by nimeshrmr

HTML

<p ><ul class='sidebar-iproducts-ul'><li>IPuzzles</li><li>IPuzzles</li><li>IPuzzles</li><li>IPuzzles</li><li>IPuzzles</li><li>IPuzzles</li></ul>
    </p>

CSS

.sidebar-iproducts-ul li{
float: left;
    list-style: none outside none;
    padding: 5px 2%;
    width: 44%;
height:20px;
margin:2px 0;

}

.sidebar-iproducts-ul-hover-act{
height:18px !important;
border:1px solid #cfcfcf;
background-color:#eee;
width:41% !important;
padding-left:5% !important;
text-align:center;
}

JavaScript

$(document).ready(function() { 
        $(".sidebar-iproducts-ul li").mouseenter(function () {

    $(this).addClass("sidebar-iproducts-ul-hover-act");
  }
);
$(".sidebar-iproducts-ul li").mouseleave(function () {
    $(this).removeClass("sidebar-iproducts-ul-hover-act");
  }
); 
 
    });