JSFiddle - React, Tailwind, and code Playground

HTML

<a class="abc">
    <div class="test">ABC</div>
    <div id="def">TEST</div>
</a>

CSS

.test {
    border:1px solid red;
    padding:10px;
    width:100px;
}

a.abc:hover {color:red;}

#def { 
    display:none;
    border:1px solid red;
    padding:10px;
}

JavaScript

$(".abc").mouseenter(function(){
    clearTimeout($('#def').data('timeoutId'));
    $('#def').show(200);
}).mouseleave(function(){
    var someElement = $(this);
    var timeoutId = setTimeout(function(){
        $('#def').hide(200);
    }, 650);
    $('#def').data('timeoutId', timeoutId); 
});

$("#def").mouseenter(function(){
    clearTimeout($('#def').data('timeoutId'));
}).mouseleave(function(){
    var someElement = $(this);
    var timeoutId = setTimeout(function(){
        $('#def').hide(200);
    }, 650);
    $('#def').data('timeoutId', timeoutId); 
});