Search code examples
javascripthtmlcssmouse

Make mouse cursor custom image change onclick

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:

  1. 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.)
  2. I am not sure how to change my cursor to other image.
  3. I want this to make it happen on my whole site not just on single text or image.
Solution

  • 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