ActivePresenter Saola Animate Pricing Download

Change cursor design on hover

(Shawn Si) #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
(Shawn Si) #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.

(Toan Le) #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?

(Toan Le) #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.