JSFiddle - React, Tailwind, and code Playground

HTML

<div id="d1">div 1</div>
<div id="d2">div 2</div>
<div id="d3">div 3</div>

CSS

#d1 {
    width: 250px;
    height: 200px;
    background: red;
}

#d2 {
    width: 250px;
    height: 200px;
    background: blue;
    position: absolute;
    top: 150px;
    left: 150px;
}

#d3 {
    position: absolute;
    top: 400px;
    background: green;
    width: 100px;
    height: 100px;
    display: none;
}

JavaScript

var count=0
$('#d1, #d2').mouseenter(function(){
    count++;
    $('#d3').show();
}).mouseleave(function(){
    count--;
    
    setTimeout(function(){
        if (count==0){
                $('#d3').hide();
            }
    },50);
});