JSFiddle - React, Tailwind, and code Playground

HTML

<div id="parent">
    <div id="child"></div>
</div>

CSS

#parent {
    height: 200px;
    width: 200px;
    background-color: #333;
    position: relative;
}
#child {
    position: absolute;
    left: 100%;
    height: 100px;
    width: 100px;
    background-color: #aaa;
    display: none;
}

JavaScript

$(function() {
    var timer;
    $("#parent").mouseenter(function() {

        timer = setTimeout(function() {
            $("#child").fadeIn(300);
        }, 1);
    }).mouseleave(function() {
        clearTimeout(timer);
        $("#child").fadeOut(300);
    });
}); //ready