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