JSFiddle - React, Tailwind, and code Playground

by jamygolden

HTML

<div id="hidden_stuff">hover me</div>

<ul>
<li><a href="#">item1</a></li>
<li><a href="#" id="trigger">item2</a></li>
<li><a href="#">item3</a></li>
<li><a href="#">item4</a></li>
</ul>

CSS

#trigger{position: relative;}

#hidden_stuff{background: papayawhip; display: none; position: absolute; left: 40px; top: 30px;}

.no-js div:hover ul{display: block}

JavaScript

var timeout;

$('#trigger, #hidden_stuff').hover(function() {
    
    window.clearTimeout(timeout);
    $('#hidden_stuff').show();

}, function() {
    
   timeout = setTimeout(function(){
       
        $('#hidden_stuff').hide();
       
    }, 2000);

});