Change mouse curser to look like you can click on an element that isn't a button or a link-CodePudding

When you hover your mouse over a button or a link, the curser changes design to reflect that the element is clickable, but when hovering the mouse over an element with the onClick() function, it doesn't.

Is there a way to replicate this behavior on elements with the onClick() function?

CodePudding user response：

You can add css property cursor to that element.

.yourElement {
    cursor: pointer;
}

CodePudding user response：

Check for: CSS Syntax cursor: value;

Here you can find a list of the cursor css options:

CSS cursor Property

The cursor can also be an image:

.custom {
  /* The second value here is a fallback. */
  cursor: url(images/my-cursor.png), auto;

  /* You may need coordinates to adjust the pointer
     for example, the custom cursor is circular and you want
     the middle to be where you click */
  cursor: url(target.svg) 15 15, move;
}

From : CSS Tricks