JSFiddle - React, Tailwind, and code Playground

HTML

<div id="d1" class="box">div 1</div>
<div id="d2" class="box">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('mouseenter', function(e) {
  $('#d3').slideDown();
}).on('mouseleave', function(e) {
  if (e.relatedTarget && !e.relatedTarget.classList.contains('box'))
    $('#d3').slideUp();
});