How to Maintain Cursor Style While Disabling Link Interactivity with "pointer-events: none"?

Maintain Cursor Style with "pointer-events: none"

Disabling a link's interactivity using "pointer-events: none" can conflict with cursor property changes. This is because "pointer-events: none" prevents all mouse interactions with the element, including cursor changes.

To address this issue, you can apply the cursor property to the parent element instead of the link itself. This way, the cursor change will take effect while preserving the disabled interactivity of the link.

Example:

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

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

However, certain browser inconsistencies exist. To ensure compatibility with IE11, you may need to add a pseudo element:

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

This pseudo element enables text selection in Firefox and allows the cursor change in Chrome without compromising the interactivity disablement.

The above is the detailed content of How to Maintain Cursor Style While Disabling Link Interactivity with "pointer-events: none"?. For more information, please follow other related articles on the PHP Chinese website!