JSFiddle - React, Tailwind, and code Playground

HTML

<div id='container'>
    <div id='test'></div>
    <button id='reset'>Reset</button>
</div>

CSS

#container{
    width:100%
    height: 100%;
    background-color : yellow;
}

#test{
    width : 200px;
    height : 200px;
    border : 2px solid red;
}

JavaScript

var mouseoutside=false;
$('#test').hover(function() {
    mouseoutside = true;
});

$('#reset').click(function() {
    if (mouseouside) {
        $('#test').hide();
        mouseoutside = false;
    }
});