JSFiddle - React, Tailwind, and code Playground

HTML

<div class="overlay" id="overlay"></div>
<button class="button" id="button">Foo</button>
<br>
<br>
<br>
<br>
<div id="log"></div>

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;

var button = document.getElementById("button");
var overlay = document.getElementById("overlay"); 
var log = document.getElementById("log");

button.addEventListener('mouseover', function() {
    log.innerHTML += 'over' + "<br>";
}, false);

button.addEventListener('mouseout', function() {
    log.innerHTML += 'out' + "<br>";
}, false);

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