JSFiddle - React, Tailwind, and code Playground

HTML

<div id='cont'>
  <div id="red"></div>
<div id='invisible'>
  dupa
</div>
</div>

CSS

#cont {
  position: relative
}

#red{
    position : absolute;
background-color : red;
    width : 100px;
    height : 100px;
}

#invisible {
  position: absolute;
  top: 100px;
  border: none;
}

JavaScript

let mouseX;
let mouseY;

var red = document.getElementById("red");

var theta = 0;
setInterval(function(){
    red.style.left = parseInt(100 + 100 * Math.cos(theta)) + "px";
    theta += 0.1;
    const redDiv = document.getElementById('red');
    const rect = redDiv.getBoundingClientRect();
    /* console.log('mouseX', mouseX) */;
    /* console.log(rect.left) */;
    
    if (mouseX > rect.left) {
    console.log('true');
    /* console.log(document.getElementById('invisible')) */;
    document.getElementById('invisible').style.border = '1px solid red';
    /* red.style.border = '1px solid green' */;
    /* red.style.backgroundColor = 'green' */;
    } else {
    document.getElementById('invisible').style.border = 'none';
    }
}, 30);

/* red.onmouseover = function(){
 red.style.backgroundColor = "blue";   
}
red.onmouseout = function(){
 red.style.backgroundColor  = "red";   
} */

function doMagic(mouseEvent)
{
  const redDiv = document.getElementById('red');
  if (mouseEvent)
  {
    //FireFox
    mouseX = mouseEvent.clientX;
    mouseY = mouseEvent.clientY;
   
  }
  else
  {
    //IE
    mouseX = window.event.screenX;
    mouseY = window.event.screenY;
  }
  }
  
  window.onmousemove = doMagic;