Make mouse cursor custom image change onclick-CodePudding

First, I am building a website on cargo. There's html editor but I don't think it works that well along with the site builder itself.

I want my custom image mouse cursor image change while it's on click. I've got three problems here:

I can't set my default cursor to image. (It was successful in cargo but I don't know how to do this on html editor.)
I am not sure how to change my cursor to other image.
I want this to make it happen on my whole site not just on single text or image.

CodePudding user response：

Here you go! It's quite simple to do:

Just write the cursor property to whatever Selector you want, for the whole WebSite html {...} of course.

html {
  background-color: lightgray;
  cursor: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/happy.png"), auto;
}

<html>

</html>

There are also a lot of default cursors: You can check them out here: https://codepen.io/chriscoyier/pen/uCwfB

CodePudding user response：

I would simply use a combination of CSS and JavaScript.

CSS class declaring the appropriate cursor definition with a keyword fallback. Then add a simple onm ousedown event to fire the addition of a second CSS class that declares an overriding cursor definition. Add a second onm ouseout event to remove the second class that was added on click.

/* keyword fallback example: use pointer, if hand.png doesn't exist */
.cursor-hand {
  cursor: url(hand.png), pointer;
}