首頁 > web前端 > css教學 > 使用'pointer-events: none”停用懸停事件時如何套用遊標樣式?

使用'pointer-events: none”停用懸停事件時如何套用遊標樣式?

Linda Hamilton
發布: 2024-11-05 10:23:02
原創
928 人瀏覽過

How to Apply Cursor Styles When Disabling Hover Events with `pointer-events: none`?

使用指標事件停用懸停事件時新增遊標屬性:無

使用指標事件停用懸停事件:無有時會阻止遊標樣式的應用。這是因為pointer-events: none有效地使元素對滑鼠互動不可見,包括更改遊標樣式。

要解決此問題,應將遊標屬性應用於包含帶有指標的元素的父元素- 事件:無。這允許將遊標樣式套用至父元素,同時仍會停用子元素的懸停事件。

範例:

HTML:

<div class="container">
  <a href="#">Link</a>
</div>
登入後複製

CSS:

.container {
  cursor: pointer;
}
.container a {
  pointer-events: none;
  color: blue;
}
登入後複製

在此範例中,光標屬性應用於.container 類,其中包含 。關聯。這允許遊標在懸停在容器上時更改為指針,即使連結本身俱有指針事件:沒有應用。

請注意,使用此方法時可能會出現瀏覽器不一致的情況。例如,在 IE11 中,可能需要偽元素來確保相容性。此偽元素的寬度和高度應設定為 100%,位置設定為絕對,覆蓋父元素的整個區域。

以上是使用'pointer-events: none”停用懸停事件時如何套用遊標樣式?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板