如何使用 :hover 和多個相鄰兄弟選擇器解決 Webkit 錯誤？

帶有:hover 和多個相鄰兄弟選擇器的Webkit 錯誤

在Safari 和Chrome 等瀏覽器中，:hover偽類可以工作正確地使用相鄰同級選擇器，例如a:hover div。然而，當使用多個相鄰同級選擇器時，就會出現錯誤，如 div:hover a div。

問題

在 Webkit 瀏覽器中，div:hover a div 選擇器故障，失敗將樣式套用於

;元素符合預期。矛盾的是，增加一個同級組合器，例如 div:hover ~ div，無論有沒有樣式，都莫名其妙地解決了這個問題。

解決方案

要規避這個 Webkit 錯誤，您可以採用一種技術，涉及身體元素上的動畫。透過將動畫CSS 類別附加到具有空動畫的body 元素，您可以有效地誘騙瀏覽器解決該錯誤：

<code class="css">body {
  -webkit-animation: bugfix infinite 1s;
}

@-webkit-keyframes bugfix {
  from {
    padding: 0;
  }
  to {
    padding: 0;
  }
}</code>

此解決方案的工作原理是觸發頁面的重新渲染，這會強制Webkit 正確解析同級選擇器。您可以在 JS Fiddle 上查看此解決方法的範例：http://jsfiddle.net/jalbertbowdenii/ds2yY/1/。

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