如何使用 :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中文网其他相关文章！