CODEWITHSUNDEEP
javascriptcursor
user8846537
user8846537

Reputation:

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.

Upvotes: 0

Views: 431

Answers (2)

Nisal Edu
Nisal Edu

Reputation: 7591

Try this might help you

<html>
<span style="cursor:auto">auto</span><br>
<span style="cursor:crosshair">cross-hair</span><br>
<span style="cursor:default">default</span><br>
<span style="cursor:e-resize">e-resize</span><br>
<span style="cursor:grab">grab</span><br>
<span style="cursor:progress">progress</span><br>
<span style="cursor:s-resize">s-resize</span><br>
<span style="cursor:se-resize">se-resize</span><br>
<span style="cursor:sw-resize">sw-resize</span><br>
<span style="cursor:help">help</span><br>
<span style="cursor:move">move</span><br>
<span style="cursor:n-resize">n-resize</span><br>
<span style="cursor:ne-resize">ne-resize</span><br>
<span style="cursor:nw-resize">nw-resize</span><br>
<span style="cursor:pointer">pointer</span><br>
<span style="cursor:text">text</span><br>
<span style="cursor:w-resize">w-resize</span><br>
<span style="cursor:wait">wait</span><br>
<span style="cursor:not-allowed">not-allowed</span><br>
<span style="cursor:no-drop">no-drop</span><br>

</html>

Upvotes: 0

user184994
user184994

Reputation: 18301

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

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

Upvotes: 1

Related Questions