Change mouse cursor to image


(Matthew kennedy) #1

Hi

Anyone got any idea if possible to change mouse cursor to a custom image? Eg. Of a hand.

Ive not skills in code at all so help as always much appreciated.

thanks
matt


Annoyed Tomatoes
#2

If you want your cursor to change when over an element, set a class on that element (like handclass) and use CSS to target it in the Head of your document. You can edit the contents of the … of your exported .html file by clicking on ‘Edit HTML Head’ in the Document Inspector:

.handclass:hover {
 	cursor: url('http://example.com/cursor.png'), default !important;
 }

Here’s more info about the cursor property: https://davidwalsh.name/css-custom-cursor


(Matthew kennedy) #3

Hi thanks. Im actually looking to change the cursor permanently. Do you know how you might do that?


#4

You would need to create an element (or multiple elements with that class) above all other elements to do that. Just make sure you have little spaces where you actually want people to be able to click.


(𝕄𝕚𝕔𝕙𝕒𝕖𝕝 𝔾𝕒𝕣𝕠𝕗𝕒𝕝𝕠) #5

This is surprisingly difficult… if you’re scaling the scene. I wasted much of the day trying to figure it out. I’m tired. Heh, so I’m taking a break. I’m pretty close though. It almost works…

…but it breaks when used in an iFrame.


#6

Hi Matt!

Is this what You are trying to accomplish? Demo.

Project file: CustomCursor_JHSv1.hype.zip (18.9 KB)

In the CSS “style” tag (in the Project’s “Head HTML” tab) the “body” is set to a custom cursor, as well as two of the squares (whose class is set to “. customCursor” in the CSS). You set the “class” for an element - such as the squares - in the “Identity Inspector”. Do NOT include the “.” (dot) when entering a class name in the “Identity Inspector”. It would be just customCursor - as per my Project file.

The blue square is set to the pointer cursor in the “Actions Inspector” - just for variation.


“Head HTML” tab


(Matthew kennedy) #7

Thats gona done it. Nice one! Thanks so much.