JSFiddle - React, Tailwind, and code Playground

by f0t0n

HTML

<ul id="menu">
    <li>Item 1</li>
    <li class="current active">Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>

CSS

#menu > li {
    display: inline-block;
    padding: 5px;
    border: 1px solid #444;
    cursor: pointer;
    margin: 5px;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}
#menu > li.active {
    color: red;
    border-color: red;
    box-shadow: 2px 2px 1px red;
}

JavaScript

$('#menu li').on('mouseover', function() {
    var li$ = $(this);
    li$.parent('ul').find('li').removeClass('active');
    li$.addClass('active');
})
.on('mouseout', function() {
    var li$ = $(this);
    li$.removeClass('active');
    li$.parent('ul').find('li.current').addClass('active');
});