JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li class="hoverable">Hover not makes effect</li>
    <li>Hover makes effect</li>
</ul>

CSS

li {
    display: block; 
    width: 200px;
    height: 20px; 
    background-color: #666; 
    margin: 4px; 
    color: #fff;
    font-family: sans-serif; 
    padding: 4px; 
    cursor: pointer;
}


li:hover { 
    background-color: #999; 
}


.hoverable {
    background-color: #666; 
}


.hoverable:hover {
    background-color: #999; 
}

JavaScript

$(function() {
    var className = 'hoverable'; 
    $('ul').on('mouseenter', 'hoverable', function(e) {
        $(this).removeClass(className); 
        e.stopPropagation(); 
        e.preventDefault(); 
        return false; 
    }).on('mouseleave', function(e) {
        $(this).addClass(className);
        e.stopPropagation(); 
        e.preventDefault(); 
        return false; 
    });
});