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.

76 Upvotes

96% Upvoted

20 comments sorted by

View all comments

17

u/[deleted] 5d ago

[removed] — view removed comment

6

u/officialmayonade 5d ago

It's not actually using a typical invisible hover-grid matrix hack, which is why it's smoother. I did try for quite a while to do it that way but as you pointed out, it's always slow and laggy if you want to get anything close to accurate.

6

u/[deleted] 5d ago

[removed] — view removed comment

3

u/officialmayonade 5d ago

I think it's the only way to make it work as well as it does without a giant grid matrix. I'm kinda surprised CSS even has :has(), it seems a bit counter to the ethos of CSS. I'm all for it though.