How to be Annoying with CSS Cursors (and a sprinkle of JS)

Looking for a new way to annoy¹ your website visitors? Of course you are! How about changing their cursors to an emoji – and we won’t stop there. We’ll make that emoji change based on where they are on the page, wild stuff🤪!

Why 🔗︎

Thanks to the wonderful CSS tips a friend unwittingly sent me, I was forced by the hands of fate to adopt the emoji cursor on my own site. If you don’t like it, you’ll have to take it up with them.

How can I do this too ??? 🔗︎

The most important bit is adding classes you can easily reference with the emoji cursor changes. Feel free to choose whatever 🖼 suits your fancy.

To make it change based on position, it’s a simple little function added in one of your js files:

And the last piece since I got lazy and wanted to just use an id, though you could definitely do it cleaner by making the elem lookup go find body without it:

That’s it 🔗︎

Now you have everything necessary in your toolkit to ensure your visitors leave more perplexed than they came.