JSFiddle - React, Tailwind, and code Playground

by ravimallya

HTML

<div id="hover">hover</div>
<div id="box" style="display: none">
   <ul>
       <li><a href="#" class="bt btleft">Highlight it</a></li>
       <li><a href="#" class="bt btright">Reset</a></li>
       <li><a href="#" class="bt btright">cancel</a></li>
    </ul>
</div>

CSS

#hover
{
    display:block;
    width:100px;
    padding:2px 3px;
    text-align:center;
    background:#ccc;
    cursor:pointer;
}
li a
{
    display:block;
    padding-left:4px;
    background:#555;
    width:100px;
    line-height:30px;
}

JavaScript

$('#hover').hover(function() {
    clearTimeout($(this).data('timeout'));
    $('#box').slideDown('fast');
}, function() {
    var t = setTimeout(function() {
        $('#box').slideUp('fast');
    }, 1000); // wait time - change 
    $(this).data('timeout', t);
});