Getting the Mouse Position using CSS

For his post How to Map Mouse Position in CSS on CSS-Tricks, Amit Sheen created this lovely demo:

The demo does use CSS Custom Properties for the X/Y position of the mouse, but they’re not injected using JavaScript. Instead, Amit uses the same technique as used in CSS-Only Direction Aware Hover: capture the hover on extra injected elements (here: 100 of them 😅).

By means of a General Sibling Combinator he then passes the data of each cell — which knows its location in the grid — to the content.

.cell:nth-child(42):hover ~ .content {
  --positionX: 1;
  --positionY: 3;
}