How to Override "pointer-events: none" with CSS "cursor" Property?

Overriding "pointer-events: none" with CSS "cursor" Property

When attempting to disable a link and apply a custom cursor style, you might encounter an issue where the cursor property remains unaffected. This occurs due to the use of "pointer-events: none," which disables all mouse interactions with the element.

To override this behavior and change the cursor property, you can apply the changes to the parent element of the link. Here's an example:

HTML

<code class="html"><span class="wrapper">
    <a href="#">Some Link</a>
</span></code>

CSS

<code class="css">.wrapper {
    position: relative;
    cursor: text;  /* This is used */
}
.wrapper a {
    pointer-events: none;
}</code>

This technique is effective in most browsers. However, there may be inconsistencies in older versions of Internet Explorer (IE11). To ensure cross-browser compatibility, you can add a pseudo-element to the parent element:

<code class="css">.wrapper:after {
    content: '';
    position: absolute;
    width: 100%; height: 100%;
    top: 0; left: 0;
}</code>

With these modifications, you can successfully disable the link while maintaining your desired cursor styling.

The above is the detailed content of How to Override "pointer-events: none" with CSS "cursor" Property?. For more information, please follow other related articles on the PHP Chinese website!