Change cursor design on hover

Is there a way to change the design of the cursor from the default arrow to something else when it hovers over a specific object?

Can the design of the cursor be different for different objects?

Thanks!

Shawn

Select the element, then properties pane (normally on the right) general section and use the icon at the end of the cursor box.

cursor

1 Like

Great.

Is there a way to integrate our own design?

Yes, but I think you have to use CSS.

In the class name field in the image above enter “custom-cursor” without the speech marks. Then on the document pane, select Edit CSS and add the following code:

.custom-cursor {
  cursor: url(resources/cursor.png), auto;
}
  • The Class Name on your element must match the class name used in the CSS.

  • The cursor.png name must match your resource name for the cursor. I’ve added the image to the resource pane for simplicity.

  • If you’re using it on IE, then the format must be of type .cur not png.

Indeed, custom cursor can be typed directly into the Cursor property field.

Hi Toan Le,

That’s what I would have thought as well but I couldn’t figure out what value goes in the box to make the custom cursor work?

Hi Mack,

You should type only CSS value:

custom%20cursor

Unfortunately, in preview, resources folder is different so it only works when exporting to HTML5.

Thanks, I didn’t include the ‘,auto’ bit which is why that didn’t work.