JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outer">
    <div class="inner"></div>
</div>
<br /><br />
<p>My question is: Why is the onMouseOut event fired even when the mouse hovers into the inner square, which technically is still inside of the outer square? Is there a way to prevent that?</p>
<br /><br />
<p id="action"><p>

CSS

.outer {
    background: #AAA;
    width: 100px;
    height: 100px;
    padding: 50px;
}

.inner {
    background: #777;
    width: 100px;
    height: 100px;
}

JavaScript

$(document).ready(function() {
    $('.outer').mouseover(function() {
       $('#action').append('Entered outer.<br />');
    });
    $('.outer').mouseout(function() {
       $('#action').append('Left outer.<br />');
    });
    $('.inner').mouseover(function() {
       $('#action').append('Entered inner.<br />');
    });
    $('.inner').mouseout(function() {
       $('#action').append('Left inner.<br />');
    });
});