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

$('#d1, #d2').on('mouseover', function(e){
    $('#d3').slideDown();
})
$(document).on('mouseover', function(e) {
		if(e.target.id!='d1' && e.target.id!='d2')
   	 $('#d3').slideUp();
});