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 {
    float: left;
}
.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(1000);
        
    }

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