JSFiddle - React, Tailwind, and code Playground

by svtux

HTML

<div class="menu">
    <div class="first off"></div>
    <div class="first on"></div>
</div>
<div class="menu">
    <div class="second off"></div>
    <div class="second on"></div>
</div>
<div class="menu">
    <div class="third off"></div>
    <div class="third on"></div>
</div>

CSS

.menu {
    display: inline-block;
    float: left;
    margin-left: 5px;
}
.menu .on,
.menu .off {
    width: 100px;
    height: 100px;
}
.menu .on {
    background: #f00;
    display: none;
    margin-top: -100px;
}
.menu .off {
    background: #aaa;
}

JavaScript

$(function() {
    
    $('.menu').hover(menuIn, menuOut);

    function menuIn(e) {
        
        $(e.target).parent().find('.on')
        .stop()
        .fadeIn();
        
    }

    function menuOut(e) {
        
        $(e.target).parent().find('.on')
        .stop()
        .fadeOut();
        
    }
    
});