首頁  >  文章  >  web前端  >  如何在使用「pointer-events: none」停用連結互動性的同時保持遊標樣式?

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

Linda Hamilton
Linda Hamilton原創
2024-11-05 00:34:02993瀏覽

How to Maintain Cursor Style While Disabling Link Interactivity with

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

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