active cursor / image on hovering

[bbbfg]

Hello,

is it possible to have a different cursor to the "normal hand" when hovering and clicking on an action?

The usual arrow shall always be there but than an image should appear when sth. is clickable...

Tags would be great! :)
Thanks for help.

[arminunruh]

There are different situations when something is clickable. For example, an image that you can open in the lightbox is clickable. Or any link in a menu. But those two are two different things because one is a link and one is an interactive element.

If, for example, you want to have an image for a cursor on a link, you can use this CSS:

a:hover {
  cursor: url('https://example.com/custom-cursor.png');
}

If you read this here, you see you can also add two numbers x and y. These are important for the position where your image does the click. For example, the left top corner should be the point of the default mouse cursor. Then x and y should be zero.
https://developer.mozilla.org/en-US/docs/Web/CSS/cursor

To get the URL for the cursor you upload your image in your WordPress media library. Then if you click on the image in the WordPress Media Library, you can see the URL of the image and copy it. If you want to use the SVG, make sure it contains a width and height. So if you open your svg with a text editor, the opening svg tag should also contain width and height attributes.

I think a custom cursor image can't be bigger than 128x128 pixels. So, probably the example above with 200px width is too big.

[bbbfg]

Great, thanks, that worked out fine! :)