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