JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
</ul>

CSS

li {
    display:block;
    float:left;
    list-style:none;
    padding:10px;
    background:#ddd;
}
ul {
    overflow: auto;
}

JavaScript

$(".item").on('mouseenter', mEnter)
    $('ul').on('mouseleave', function () {
        $('.item').stop();
        $('.active').removeClass("active")
            .addClass("item");
        $(".item").show(700);
    });

    function mEnter() {
        $(this).addClass("active");
        $(this).removeClass("item");
        $(".item").hide(700);
    }