为什么 :hover 在 Webkit 浏览器中不能与相邻同级选择器一起正常工作？

具有多个相邻兄弟选择器的 Webkit 错误

在 Webkit 浏览器（Safari、Chrome）中，使用 :hover 伪值时会出现问题-具有多个相邻兄弟选择器的类。以下代码说明了该问题：

div:hover + a + div {}

将鼠标悬停在

上时元素，样式未正确应用。但是，如果将鼠标悬停在 上，首先是

，样式按预期应用。

添加通用同级选择器，如：

div:hover ~ div {}

无论是否声明样式，都会解析问题。

此 Webkit 错误的解决方法是在 body 元素上伪造动画：

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

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

  to {
    padding: 0;
  }
}

可以在此处查看实际效果：https://jsfiddle.net/jalbertbowdenii/ ds2yY/1/.

以上是为什么 :hover 在 Webkit 浏览器中不能与相邻同级选择器一起正常工作？的详细内容。更多信息请关注PHP中文网其他相关文章！