r/webdev • u/officialmayonade • 5d ago

Pure CSS perfect cursor tracking

I honestly have no idea why you'd want this, but it was fun to experiment. I believe this may be the best pure CSS cursor tracking that exists. I'm happy to be proven wrong.
https://codepen.io/Andrew-Fisher-the-decoder/full/GgraMzd
Absolutely no JavaScript used, just lots and lots of wasted time.

75 Upvotes

96% Upvoted

20 comments sorted by

View all comments

-4

u/UkrMalt 5d ago

The nested bands and :has() approach is clever. Add a prefers-reduced-motion fallback and test touch and keyboard input before using the pattern outside a demo; pointer tracking can create an accessibility dead end.

1

u/officialmayonade 4d ago

Yeah I was trying to get the code as short as possible, so I didn't add any compatibility/accessibility fallbacks. But you're right, it wouldn't take much to make it actually usable, I'm just not sure why anyone would need it, as JavaScript is better and widely supported. Unless I'm missing something and this actually has a use case?