JSFiddle - React, Tailwind, and code Playground

HTML

<div class="red">
    <div class="blue">OK</div>
 </div>


passe o mouse sobre o bloco azul
<br>
depois passe de bloco azul para o bloco vermelho
<br> 
o alerta(out) é disparado mesmo ainda estando dentro do bloco vermelho
<br>
eu queria que isso não acontecesse

CSS

.red {width:200px;height:200px;background:red;position:relative}
.blue {width:100px;
    height:100px;
    background:blue;
    color:white;
    position:absolute;
    z-index:1;
}

JavaScript

$(document).ready(function(){
	$('.red').mouseover(function(){
    	alert('in');                                      
   	}).mouseleave(function(){
    	alert('out');
    });
});