This content originally appeared on Bram.us and was authored by Bramus!
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;
}
This content originally appeared on Bram.us and was authored by Bramus!
Bramus! | Sciencx (2021-03-02T23:10:39+00:00) Mapping Mouse Position in CSS Demo. Retrieved from https://www.scien.cx/2021/03/02/mapping-mouse-position-in-css-demo/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.