為什麼 WebKit 無法在多個相鄰兄弟元素上套用 :hover 樣式？

WebKit 問題：具有多個相鄰同級選擇器的懸停偽類

Web 瀏覽器在處理:hover 偽類時通常會遇到挑戰與鄰近兄弟選擇器結合。特別是，WebKit（Safari 和 Chrome）在將 :hover 樣式應用於一系列相鄰同級元素時面臨困難。

挑戰：

以下範例示範了該問題:

div:hover + a + div { /* styles here */ }

在這種情況下，當滑鼠直接懸停在第二個div 上時，WebKit 無法將樣式套用到第二個div 上。但是，如果滑鼠先懸停在前面的錨元素上，然後懸停在第二個 div 上，樣式將按預期套用。

解決方案：

解決方法此錯誤涉及在body 元素上偽造動畫：

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

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

此解決方案引入了一個簡單的解決方案動畫，強制WebKit 重新渲染body 元素，從而解決了懸停偽類和多個相鄰同級的問題選擇器。

以上是為什麼 WebKit 無法在多個相鄰兄弟元素上套用 :hover 樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！