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中文网其他相关文章！
