首頁  >  文章  >  web前端  >  如何使用CSS'cursor”屬性覆蓋'pointer-events: none”?

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

DDD
DDD原創
2024-11-06 10:01:02221瀏覽

How to Override

使用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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn