JSFiddle - React, Tailwind, and code Playground

by yoowordpress

HTML

<div class="link">link</div>
<div class="target">target</div>

CSS

.link { width:300px; height:30px; background:blue;}
.target { width:300px; height:300px; background:red; display:none; position: absolute; top:200px;}

JavaScript

(function() {

    var time = 1000,
        timer;

    function handlerIn() {
        clearTimeout(timer);
        $('.target').stop(true).css('opacity', 1).show();
    }
    function handlerOut() {
        timer = setTimeout(function() {
            $('.target').fadeOut(3000);
        }, time);
    }

    $(".link, .target").hover(handlerIn, handlerOut);

}());