[SOLVED] Changing cursor for project

Changing cursor for project

I would like to learn how to make a simple HTML file where my cursor is changed to a custom image while also being tracked with no latency across the page (same function as on my OS which is mac, but I wish to use a new cursor for a GUI project).

I have read all CSS property rules¹. The problem is these work only for when I hover over a div attribute or a button, when I want it to work permanently.

Solution

To use a custom image, you can use the cursor: url property within a class and specify a path to your image that you want to replace the cursor with.

.cursor {
    cursor: url("image-path.png");
}

If you'd like to apply the cursor across the whole page, you can add the CSS rule to the html element.

<html>
  <head>
  <style>
      html {
          cursor: url("https://i.imgur.com/8Jhi9oS.png"), auto;
      }
  </style>

  <body>
      This page has a custom cursor!
  </body>
</html>