JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>jQuery - Delay</title>
    </head>
<body>
    <div id="bg" class="box1"></div>
    <div id="test" class="box2">test</div> 


</body>
</html>

CSS

.box1 {
    position:absolute;
    left: 0px;
    top:0px;
    width: 100%;
    height: 100%;
    background-color: #ff0000;
    z-index: 1;
}

.box2
{ position: absolute; left: 100px; top: 0px; width: 100px; height: 100px; background-color: #ff00ff; z-index: 1000;}

JavaScript

$(document).ready(function() {
    $('#test').hide();

    var clearTimeoutId = 0;

    function hideDiv() {
        alert('test');
        $('#test').fadeOut();
        clearTimeoutId = 0;

    }

    function setClearTimeout() {
        if (clearTimeoutId != 0) {
            window.clearTimeout(clearTimeoutId);
        }
        clearTimeoutId = window.setTimeout("hideDiv()", 500);
    }

    $('#bg').mousemove(function() {
            $('#test').fadeIn();

         setClearTimeout();
    });
});