JSFiddle - React, Tailwind, and code Playground

by aidanewen

HTML

<div id="el">Hover here!</div>

<!--

READ ME

Move the mouse over the element and then leave it there (let go of the mouse as soon as the cursor turns to pointer).

The :hover state remains on the element and the 'mouseleave' event is never fired

-->

CSS

div:hover {
    background-color: blue;
}
div {
    background-color: red;
    cursor:pointer;
    color: white;
    padding: 10px;
    width: 50px;
    height: 50px;
    position: absolute;
    top: 50px;
    left: 50px;
    transition: all 0.3s ease-in-out;
}

JavaScript

var el = document.getElementById('el');
el.addEventListener('mouseover', function() {
    el.style.top = '200px';
    el.style.left = '200px';
});
el.addEventListener('mouseleave', function() {
    el.style.top = '50px';
    el.style.left = '50px';
});