JSFiddle - React, Tailwind, and code Playground

HTML

<div id="bla">BLA<br/>Mousedown here...</div>
<div id="blu">BLU<br/>...then come in here</div>
Result : <span id="result">...</span>
</br>Mousedown in BLA then drag your mouse to BLU. Hold your mouse down ! See the result : IN: BLA. Mouseenter not fired on BLU as long as you keep your mouse down.
</br>Now do it the other way around. Result : IN: BLA. Mousenter is fired when entering BLA.
</br>Difference between those two : BLA has overflow hidden !

CSS

#bla {
    overflow:hidden;
    background-color: green;
}

#blu {
    background-color: red;
}

div {
    height: 100px;
    width: 100px;
    border: 1px solid black;
    font-weight: bold;
    text-align: center;
}

JavaScript

var result = document.getElementById('result');

document.getElementById('blu').onmouseover= document.getElementById('bla').onmouseover = function(){
    result.innerHTML =  this.id.toUpperCase();
};