Check out this quick demo that I put together: https://codepen.io/marekKnows_com/pen/LaRPZv
My goal is to have the red box only show up 2 seconds after the mouse hovers over the blue box, and disappear immediately when the mouse leaves.
This is the HTML code structure:
<div id="blueBox">
</div>
<div id="redBox" class="">
</div>
The CSS rules are set up like so:
#blueBox {
background-color: blue;
width: 200px;
height: 50px;
}
#redBox {
display: none;
background-color: red;
width: 200px;
height: 50px;
transition: display 0s step-end 2s;
}
#redBox.isVisible {
transition: display 0s step-end 0s;
display: block;
}
And here's the JavaScript snippet:
const el = document.getElementById( 'blueBox' );
const redEl = document.getElementById( 'redBox' );
el.addEventListener( 'mouseover', () => {
redBox.classList.add( 'isVisible' );
});
el.addEventListener( 'mouseout', () => {
redBox.classList.remove( 'isVisible' );
});
Currently, the red box seems to be appearing right away instead of waiting for the 2-second delay. Any ideas on why this might be happening?