changing css custom cursor via url(...)

Question

Here's a link if this would help:

Trying to add a custom css cursor. If I try to use a standard cursor for testing purposes, e.g., "wait", cursor change happens properly ... but NOT for custom css cursor via url(...)

Couldn't get the css cursor spec to work without ", help"

.surpriseCursor {
	cursor: url(clapping_hands.gif), help;   /* max size = 32 X 32 pixels */
}

<a name="surprise"> </a>
<a href="#surprise" onclick="PlaySound('applause', 'applause.mp3'); return false">
<img class="surpriseCursor" src="Broken_Heart.gif"><p>
</a>

This code should display your custom cursor provided the path is correct. Is your question, why do you need to include the text 'help'? — sol
– sol, Commented Dec 1, 2017 at 17:08
The path is at the same level as the .html, so there's no intervening folders. Why ,help ... I wish I knew ... if I delete ,help the cursor does not change. If I just have cursor: wait or some other standard one, the cursor shown is wait or whatever I use there. It's the custom url(...) that does not change as it should ... unless I put ,help there. TOTALLY INSANE — user420479
– user420479, Commented Dec 1, 2017 at 17:15
It's not insane, it's just a backup property in case there's an issue with the image. It's in the spec. — sol
– sol, Commented Dec 1, 2017 at 17:22

Alex · Accepted Answer · 2017-12-01 17:11:55Z

2

You need to specify a default cursor in case your custom one doesn't load, without it you don't have a correct CSS property. As per W3C:

A comma separated list of URLs to custom cursors. Note: Always specify a generic cursor at the end of the list, in case none of the URL-defined cursors can be used

This should be set in most cases (definitely yours) to auto.

The correct code:

.surpriseCursor {
    cursor: url(clapping_hands.gif), auto;
}

See link: https://www.w3schools.com/cssref/pr_class_cursor.asp

answered Dec 1, 2017 at 17:11

Alex

2,8203 gold badges30 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

changing css custom cursor via url(...)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related