如何使用CSS“cursor”屬性覆蓋“pointer-events: none”？

使用CSS「cursor」屬性覆蓋「pointer-events: none」

嘗試停用連結並套用自訂遊標樣式時，您可能會遇到問題其中遊標屬性不受影響。發生這種情況是由於使用了“pointer-events: none”，它會停用與元素的所有滑鼠互動。

要覆寫此行為並更改遊標屬性，您可以將變更套用到連結。以下是範例：

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>

此技術在大多數瀏覽器中都有效。但是，舊版的 Internet Explorer (IE11) 可能會出現不一致。為了確保跨瀏覽器相容性，您可以為父元素添加偽元素：

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

透過這些修改，您可以成功停用鏈接，同時保持所需的遊標樣式。

以上是如何使用CSS“cursor”屬性覆蓋“pointer-events: none”？的詳細內容。更多資訊請關注PHP中文網其他相關文章！