Search code examples
javascriptcursor

How do I change the cursor image globally

I've seen many tutorials on this using CSS's "cursor:" property. However, that's mostly for cursors seen when hovering over something. I need to change the cursor universally, throughout the site. I assume this uses Javascript, but I don't know Javascript so I need some help.

Yes, I'm aware this is usually a bad design choice, which is why the website I'm doing this for is a joke. It's meant to be a recreation of every 90s site ever.

Just to make it more clear what I want, here is the list of images I'm looking to use with the site. I'm wondering how to change the cursor universally, not just on specific elements.

Solution

  • Just change the CSS cursor property for the html or body tag

    html {
    cursor: url("hyper.cur"), auto;
}