為什麼 :hover 不能與 Webkit 瀏覽器中的相鄰同級選擇器一起正常運作？

Linda Hamilton

發布： 2024-10-24 02:42:29

原創

1092 人瀏覽過

Why Doesn't :hover Work Properly with Adjacent-Sibling Selectors in Webkit Browsers?

具有多個相鄰兄弟選擇器的Webkit 錯誤

在Webkit 瀏覽器（Safari、Chrome）中，使用:hover 偽值時會出現問題-具有多個相鄰兄弟選擇器的類別。以下程式碼說明了這個問題：

div:hover + a + div {}

登入後複製

將滑鼠停留在

上時元素，樣式未正確套用。但是，如果將滑鼠停留在上，首先是

新增通用同級選擇器，如：

div:hover ~ div {}

無論是否宣告樣式，都會解析問題。

此Webkit 錯誤的解決方法是在body 元素上偽造動畫：

body {
  -webkit-animation: bugfix infinite 1s;
}

@-webkit-keyframes bugfix {
  from {
    padding: 0;
  }

  to {
    padding: 0;
  }
}

可以在此處查看實際效果：https://jsfiddle.net/jalbertbowdenii/ ds2yY/1 /.

以上是為什麼 :hover 不能與 Webkit 瀏覽器中的相鄰同級選擇器一起正常運作？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

來源：php

本網站聲明

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

作者最新文章