Hacker News Reader

HNHacker News

Top New Best Ask Show Jobs

Comment by ImHereToVote | Hacker News Reader

Parent Full thread

ImHereToVote·

Browser don't support replacing cursor images natively for obvious reasons. You have to use JavaScript for that.

View on HN

CSS supports replacing cursor images natively.

https://developer.mozilla.org/en-US/docs/Web/CSS/cursor

In this case it looks like they didn't just want an image though, they wanted the cursor to invert the color of whatever part of the web page it's over, and to seamlessly morph into a selection highlight whenever you mouse over certain controls. Seems like that's a lot harder to make performant.

You can do that by changing the cursor icon for the elements in question. The CSS rule does support per-element swapping (because of course it does, that’s how a text input has a bar but a button has a pointer).

The cursor color inversion can't be done with CSS though.

Use a different colored image.

The background colour of the hovered element is known. When you specify the bgcolor, also override the cursor image.

The effect on the page is per-pixel, it doesn't change the whole cursor color when the hovered element changes.

For normal elements this can be done with mix-blend-mode, but that's not available for the cursor.

I am pretty sure it is doable in CSS.

another thing to block in firefox userContent.css as there doesn't appear to be an option for it in about:config

The only obvious reason I can think of is security concerns (some sort of user confusion), but JS wouldn't help with that. What other reasons are there?

Reply on news.ycombinator.com