JSFiddle - React, Tailwind, and code Playground

HTML

<a id="new" href="#">текст</a>
<div id="div-test">
<p></p>
</div>
<div id="test"><a href="#">test</a></div>
<div id="show">текст текст текст</div>

CSS

#div-test{
display:none;
width:400px;
border:1px solid #000;
padding:20px;
}
#show{
display:none;
width:400px;
border:1px solid #000;
padding:20px;
}

JavaScript

$(function(){
    $('#new').mouseenter(function(){ 
      $( "#div-test" ).show();
      $( "#show" ).hide();
    });

    $('#new,#div-test').mouseleave(function(e){
    if (e.relatedTarget.id == 'new' || e.relatedTarget.id == 'div-test') return;
    $('#div-test').show();
});

$(function(){
    $('#test').mouseenter(function(){ 
      $( "#div-test" ).hide();
      $( "#show" ).show();
    });
});    
});