如何解決 :hover 和鄰近兄弟選擇器 Webkit 錯誤？

使用:hover 和相鄰兄弟選擇器來理解並解決Webkit 錯誤

在Webkit 瀏覽器（例如​​Chrome、Safari）中，一個錯誤當與多個相鄰同級選擇器一起使用:hover 偽類時會出現這種情況。具體來說，當引入第三個相鄰兄弟時，懸停效果將不會如預期般應用。

例如：

a:hover + div {}

此程式碼運作完美。但是，再增加另一個相鄰同級選擇器：

div:hover + a + div {}

破壞了 Webkit 瀏覽器中的預期行為。

奇怪的是，如果您先將滑鼠懸停在錨元素上，然後再懸停在 div 元素上，樣式正確應用。此外，即使沒有聲明樣式，包含相鄰的~ 同級選擇器也可以解決該問題：

div:hover ~ div {}

要解決此錯誤，您可以透過在body 元素上模擬動畫來實現解決方法：

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

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

透過觸發body上的空動畫，可以有效繞過該bug。您可以在此 JSFiddle 驗證解決方案：http://jsfiddle.net/jalbertbowdenii/ds2yY/1/

以上是如何解決 :hover 和鄰近兄弟選擇器 Webkit 錯誤？的詳細內容。更多資訊請關注PHP中文網其他相關文章！