JSFiddle - React, Tailwind, and code Playground

by Yuriy Galanter

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');
var mouseX, mouseY;

window.onmousemove=function(event){
    ev = event || window.event;
    mouseX = ev.pageX;
    mouseY = ev.pageY;
}

setInterval(function() {
       
    if (mouseX >=el.offsetLeft && mouseX <= el.offsetLeft + el.offsetWidth &&
        mouseY >=el.offsetTop && mouseX <= el.offsetTop + el.offsetHeight) {

        el.style.top = '200px';
        el.style.left = '200px';
        el.className = 'div_hover';
        
        
    } else {
        
        el.style.top = '50px';
        el.style.left = '50px';
        el.className = '';
        
    }
    
    
},1000)