How to Add CSS "cursor" Property to HTML Element With "pointer-events: none"?

When you apply pointer-events: none CSS style rule on an HTML element, it means that the element cannot be the target of mouse events. This means that, by default, the cursor will not change when hovering over it. However, you can still make the cursor change when hovering over the element by setting the CSS cursor property on a wrapper element.

To do this, simply add a wrapper element around the original HTML element and apply the desired cursor property to the wrapper. For example, you could add a wrapper "<div>" around a "<button>" element and set the cursor property of the wrapper to "not-allowed", whilst keeping the pointer-events property of the button as "none":

<div id="wrapper">
  <button id="foo">Foo</button>
</div>

#wrapper {
  display: inline-block;
  cursor: not-allowed;
}

#foo {
  pointer-events: none;
}

There are some factors to consider when using this approach:

• It requires an extra HTML element to be added to DOM, which might not always be possible or desired;
• There might be inconsistencies in browser support for this, especially with old browsers such as IE;
• Without the display: inline-block on the wrapper, the wrapper and the child element could have different widths. This could be the case, for example, when the wrapper is a block-level element while the child is an inline-level element.