JSFiddle - React, Tailwind, and code Playground

Determine entry side and corner of mouseover on element.

by Travis Almand

HTML

<div class="container paint-outline"></div>

SCSS

html,
body {
  margin: 0;
  padding: 0;
}

.container {
  --paint-outline-width: 10;
  --paint-outline-color: rgba(255, 0, 0, 1);
  border: 3px solid red;
  height: 200px;
  margin: 20px;
  width: 200px;
}

.paint-outline {
  --paint-outline-length: 0;
  transition: --paint-outline-length 1000ms;
  
  &:hover {
    --paint-outline-length: 100;
    border-color: blue;
    background-image: paint(paint_outline);
  }
}

JavaScript

function paint_outline (e) {
	const clientX = e.clientX;
  const clientY = e.clientY;
  const movementX = e.movementX;
  const movementY = e.movementY;
  const previousX = clientX - movementX;
  const previousY = clientY - movementY;
  const targetWidth = e.target.offsetWidth;
  const targetHeight = e.target.offsetHeight;
  const targetLeft = e.target.getBoundingClientRect().left;
  const targetTop = e.target.getBoundingClientRect().top;
  const targetRight = targetLeft + targetWidth;
  const targetBottom = targetTop + targetHeight;
  const duration = parseInt(window.getComputedStyle(e.target).getPropertyValue('transition-duration')) * 1000;

  // corners
  let corner = null;
  if (clientX < targetWidth / 2 && clientY < targetHeight / 2) { corner = 'upper left'; }
  if (clientX <	targetWidth / 2 && clientY > targetHeight / 2) { corner = 'lower left'; }
  if (clientX > targetWidth / 2 && clientY < targetHeight / 2) { corner = 'upper right'; }
  if (clientX > targetWidth / 2 && clientY > targetHeight / 2) { corner = 'lower right'; }
  console.log(corner);

  // sides
  let side = null;
  if (previousX > targetTop && previousY < targetTop) { side = 'top'; }
  if (previousX > targetRight && previousY < targetRight) { side = 'right'; }
  if (previousX < targetBottom && previousY >= targetBottom) { side = 'bottom'; }
  if (previousX < targetLeft && previousY > targetLeft) { side = 'left'; }
  console.log(side);
  
   e.target.style.cssText = `--paint-outline-duration: ${duration}; --paint-outline-corner: ${corner}; --paint-outline-side: ${side}; --paint-outline-x: ${clientX}; --paint-outline-y: ${clientY};`;
}

document.querySelectorAll('.paint-outline').forEach(element => {
	element.addEventListener('mouseover', paint_outline);
});

CSS.registerProperty({
  name: '--paint-outline-length',
  syntax: '<number>',
  inherits: false,
  initialValue: 100
});

CSS.paintWorklet.addModule(URL.createObjectURL(new Blob([`
class PaintOutline {
  static get inputProperties() {...