为什么 WebKit 无法在多个相邻兄弟元素上应用 :hover 样式？

WebKit 问题：具有多个相邻同级选择器的悬停伪类

Web 浏览器在处理 :hover 伪类时通常会遇到挑战与相邻兄弟选择器结合。特别是，WebKit（Safari 和 Chrome）在将 :hover 样式应用于一系列相邻同级元素时面临困难。

挑战：

以下示例演示了该问题:

div:hover + a + div { /* styles here */ }

在这种情况下，当鼠标直接悬停在第二个 div 上时，WebKit 无法将样式应用到第二个 div 上。但是，如果鼠标先悬停在前面的锚元素上，然后悬停在第二个 div 上，样式将按预期应用。

解决方案：

解决方法此错误涉及在 body 元素上伪造动画：

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

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

此解决方案引入了一个简单的动画，强制 WebKit 重新渲染 body 元素，从而解决了悬停伪类和多个相邻同级的问题选择器。

以上是为什么 WebKit 无法在多个相邻兄弟元素上应用 :hover 样式？的详细内容。更多信息请关注PHP中文网其他相关文章！