Change cursor design on hover

Saola Animate Support Questions
1

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

2

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
3

Great.

Is there a way to integrate our own design?

4

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.

5

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

6

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?

7

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.

8

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

9

I LOVE SAOLA ANIMATE!, I need help with the custom cursor, I can’t get it to work! I did all the steps but it doesn’t work, could you give me an example file?

10

Hi @lesliechow_lesliecho,

Please see this sample: custom-cursor.saolapack (3.5 KB)

Regards

11

Thank you very much for responding so quickly!! You are amazing!!