htmlcsscursor

changing css custom cursor via url(...)

Here's a link if this would help:

lovesongforever.com/nancytributes

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>

Solution

  • 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