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?




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


1 Like
(Shawn Si) #3


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.

(Toan Le) #5

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?

(Toan Le) #7

Hi Mack,

You should type only CSS value:


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.