如何在使用「pointer-events: none」停用連結互動性的同時保持遊標樣式？

使用「pointer-events: none」維護遊標樣式

使用「pointer-events: none」停用連結的互動性可能會停用連結的互動性可能會與遊標屬性更改。這是因為「pointer-events: none」會阻止所有滑鼠與元素的交互，包括遊標變更。

要解決此問題，您可以將遊標屬性套用到父元素而不是連結本身。這樣，遊標變更將生效，同時保留連結的停用互動性。

範例：

<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>

但是，某些瀏覽器不一致的情況。為了確保與IE11 的兼容性，您可能需要添加一個偽元素：

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

此偽元素可在Firefox 中啟用文字選擇，並允許在Chrome 中更改遊標，而不會影響互動性禁用。

以上是如何在使用「pointer-events: none」停用連結互動性的同時保持遊標樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！