JSFiddle - React, Tailwind, and code Playground

by erier

HTML

<p>hover over one and two and three should not be yellow anymore</p>
<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>

CSS

li:focus{
    background-color:yellow;
    cursor:pointer;
    outline: none;
}

ul:hover > li:focus {
    background: none;
    cursor: default;
}

ul:hover > li:hover {
    background: yellow;
    cursor: pointer;
}

JavaScript

$('li').attr('tabindex','0').focus()