// from https://snippet.zone

function testRectIntersection(divA, divB) {
  const rectA = divA.getBoundingClientRect();
  const rectB = divB.getBoundingClientRect();
 
  return (
    rectA.left < rectB.right &&
    rectA.right > rectB.left &&
    rectA.top < rectB.bottom &&
    rectA.bottom > rectB.top
  );
}
 
function rect(color, x, y, width = 100, height = 100) {
  const el = document.body.appendChild(document.createElement('div'));
  Object.assign(el.style, {
    position: 'absolute',
    left: `${x}px`,
    top: `${y}px`,
    width: `${width}px`,
    height: `${height}px`,
    background: color
  });
 
  return el;
}
 
const redBox = rect('red', 20, 40, 100, 100);
const mover = rect('green', 130, 40, 100, 100);
// with a `mousemove` only this won't be _great_ on mobile
document.addEventListener('mousemove', e => {
  Object.assign(mover.style, {
    left: `${e.clientX - parseFloat(mover.style.width) / 2}px`,
    top: `${e.clientY - parseFloat(mover.style.height) / 2}px`
  });
 
  if (testRectIntersection(mover, redBox)) {
    redBox.style.background = 'blue';
  } else {
    redBox.style.background = 'red';
  }
});