JSFiddle - React, Tailwind, and code Playground

by Léo Durand

HTML

<ul class="menu">
    <li id="one" class="active">One</li>
    <li id="two" class="inactive">Two</li>
    <li id="three" class="inactive">Three</li>
    <li id="four" class="inactive">Four</li>
    <li id="five" class="inactive">Five</li>
</ul>

CSS

li {
    cursor: pointer;
}
.active {
    color: #f90;
}
.inactive {
    color: #aaa;
}

JavaScript

$('ul.menu li').mouseover(function () {
    $(this).siblings().attr('class', 'inactive').end().toggleClass('inactive active');
});