JSFiddle - React, Tailwind, and code Playground

by jackrugile

HTML

<div id="post-info">
    <div id="post-nav">
    </div>
</div>

CSS

#post-info {
    background: red;
    height: 100px;
    position: relative;
    width: 100px;
}

#post-nav {
    background: blue;
    display: none;
    height: 100px;
    position: absolute;
    left: 110px;
    top: 0;
    width: 100px;
}

JavaScript

$(function(){
    var timer;
    $('#post-info').hover(function(){
        clearTimeout(timer);
        $('#post-nav').stop().fadeTo(500, 1);
    }, function(){
        timer = setTimeout(function(){
            $('#post-nav').stop().fadeTo(500, 0, function(){
                 $('#post-nav').css('display', 'none');
            });
        }, 500);
    });
});