Cool cursor effects – How to make it change like that?

custom cursor that changes based on hovered elements

[Andy2211]

Hey everyone,
I’ve got a quick question about custom cursors. On this site, I have this orange dot as my cursor.

But I came across a site and noticed how cool their cursor is. It changes depending on where it is on the page. Like it changes when hovering over different elements (text, buttons, images) and it just looks really smooth and interactive.

Does anyone know how I can achieve something like this? I’m guessing it involves some JavaScript and CSS, but I am not entirely sure how to pull it off.

[edited by: not2easy at 11:14 am (utc) on May 6, 2025]
[edit reason] Please see TOS [webmasterworld.com] [/edit]

[not2easy]

It sounds like it involves assigning properties to various link classes in their css. The easy waay is to view their page source and their css and see how they are handling the task. You shouldn't copy their work, but by viewing it you can see how it is being done.

[tangor]

Played with this some time back (all CSS, no JS required). Was kind of fun but after some user testing this turned out more negative than positive because of confusion and "loss of my arrow!" Put that visual context on the back burner and haven't found a compelling reason to try again.

As in all things, just because you CAN does not mean you SHOULD. OTOH I can see specific use for this visual trick so full steam ahead for experimentation and utilization!

[lucy24]

Echoing Citrus Hybrid: You think it’s cool, but will others do so? If your site’s target audience is people very similar to you, then they may agree. But if it’s a more diverse audience, some of them will be annoyed. Remember--to take it to an extreme--that someone, somewhere, once thought it was cool for sites to start playing music the moment you arrived.

:: detour to useful sites ::

Here it is at mozilla dot org [developer.mozilla.org] and w3 dot org [w3.org] with more options than I would ever have thought of. (The only time I've personally used variable cursors is in games, not web pages. User expectations are obviously different then.)

[Andy2211]

In my original post, there were links showing what I meant and how the cursor looks. They were probably removed. It's very subtle and I dont think it would be annoying for users. I would show you, but I probably cant share a link here.

[londrum]

the linking policy on webmasterworld is bonkers. how can we say how an effect has been achieved, if we are prevented from seeing it?

why not code it so working links turn into plain text links? then we can at least copy the URL into a browser

[not2easy]

I probably cant share a link here.

Andy2211 is right as was explained to him earlier today.

why not code it so working links turn into plain text links?

Because it is against the Terms of Service, as mentioned when the original post was edited, and because it was posted here in the Webmaster General forum and not in the Site Review Forum. See Charter [webmasterworld.com]

We have a Site Review forum here: [webmasterworld.com...] where such links are welcome. No personal links are welcome in our public forums, in any form. Please see TOS [webmasterworld.com] #13 and #21 and the Posting Guidelines [webmasterworld.com] #10

The policy might seem to be bonkers to some, but if you had any idea of how often people want a "site review" you would agree completely with the Terms. Sometimes there are a dozen or more in a day.

[tangor]

I probably cant share a link here.

Personal links and self-promotion are not allowed (keeps the noise down and the playing field level), BUT you can post your best effort code (css and an html markup paragraph) for educational and commentary purposes. That part is always welcome as that is the spirit and intent of WW.

lucy24 posted a very relevant self-help guide on this subject.

_{Note: while here on Earth the moniker might resemble that of a Mediterranean tree fruit, it actually stands for a semi-famous fictional character who can communicate with invisible fingers on keyboards from 450,000 light years away circa 1940s.}