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;

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.