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.
This post was published by Daniyal Hamid. Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing. Please show your love and support by sharing this post.