JSFiddle - React, Tailwind, and code Playground

HTML

<div class="a1"></div>
<div class="a2"></div>

CSS

.a1 {
    background:black;
    width:50px;
    height:50px;
    display:block;
}
.a2 {
    background:red;
    width:50px;
    height:50px;
    display:none;
}

JavaScript

$(document).ready(function() {
    $(".a1").hover(function() {
        $(".a2").show();
  }, function() {
      $(".a2").mouseover(function() {
        $(".a2").show();
        $(".a1").addClass("a1_hover");
      });
      $(".a2").mouseout(function() {
        $(".a2").hide();
        $(".a1").removeClass("a1_hover");
      });
    });
});