Skip to content
← Back to Community
Mouse cursors
Profile icon
LincolnMiddle

There is no repl attached to this post, but I am wondering how to have a custom cursor in HTML, CSS, JS. Can I have an actual example from an actual repl?

Answered by lightningrock [earned 5 cycles]
View Answer
Voters
Profile icon
NotMe31
Profile icon
LincolnMiddle
Comments
hotnewtop
Profile icon
lightningrock

Easy! Use the cursor property in css like this:

.custom-cursor { cursor: url(cursor.png); } /* Or */ .custom-cursor { cursor: help; /* Change help to anything else */ }
Profile icon
LincolnMiddle

@lightningrock where's the html? I would like that too

Profile icon
lightningrock

Thats css! You just add a css link by doing this:

<link rel="stylesheet" href="style.css"> <!-- Change style.css to the css file -->

@DSAEvan

Profile icon
LincolnMiddle

@lightningrock what about defining a class part?

Profile icon
lightningrock
<your-element class="custom-cursor">Lorem ipsum</your-element>

@DSAEvan

Profile icon
LincolnMiddle

@lightningrock can you make an actual repl

Profile icon
LincolnMiddle
Profile icon
OlauPla

Google has a lot of things on this i looked it for you.

Hope it helped!

Profile icon
Coder100

Easy! Go to https://cursor.cc and customize away!

Anyways, can you guess what this does?

body { cursor: pointer; }

read more

Profile icon
LincolnMiddle

@Coder100 make the cursor a pointer ... P.S. https://cursor.cc is giving me a bug... can you give me a tutorial on how to customize and get the custom cursor?

Profile icon
Coder100

you could just use any image in general @DSAEvan

Profile icon
Coder100

anyway what part of cursor.cc isn't working? https://www.cursor.cc/ @DSAEvan

Profile icon
LincolnMiddle

@Coder100 When I download it, it opens a file, then closes it on my chrome tab and it does it forever. I need to force close everything to get it to stop

Profile icon
Coder100

@DSAEvan oh, so a chrome bug :(

Profile icon
LincolnMiddle

@Coder100 So how am I supposed to do a custom cursor? You try...

Profile icon
LincolnMiddle

@DSAEvan too many "..."s

Profile icon
LincolnMiddle

@Coder100 how do you use an image in general?

Profile icon
Coder100

just upload the image you want @DSAEvan