JSFiddle - React, Tailwind, and code Playground

HTML

<div class="overlay"></div>
<button class="button">Foo</button>

CSS

.button {
    margin-left: 20px;
    margin-top: 20px;
    cursor: pointer;
}
.overlay {
    position: absolute;       
    width: 100px;
    height: 100px;
    display: none;
    background: #333;
}

JavaScript

var fail = true;

$$('.button').addEvent('mouseover', function() {
    console.log('over');
});

$$('.button').addEvent('mouseout', function() {
    console.log('out');
});

$$('.button').addEvent('click', function() {
    if(fail) {
        
        // mouseout won't be fired until you move the mouse
        window.setTimeout(function() {
            $$('.overlay').setStyle('display','block');
        }, 0);
        
    } else {
        
        // mouseout event is fired instantly
        $$('.overlay').setStyle('display','block');
        
    }
});