带有 `:hover` 和多个相邻兄弟选择器的 Webkit 错误

问题描述

Safari 和 Chrome，以及 Opera 和 Firefox，可以处理 :hover 伪类和相邻兄弟选择器:

Safari and Chrome, as well as Opera and Firefox, can handle the :hover pseudo-class and adjacent-sibling selectors:

a:hover + div {}

这行得通.

但是，当添加另一个相邻兄弟时:

However, when another adjacent-sibling is added:

div:hover + a + div {}

Webkit 崩溃了.

Webkit falls apart.

但是，如果您首先将鼠标悬停在 <a> 上，然后 然后 将鼠标悬停在 <div> 上，则样式将按原样应用应该的.

However, if you first hover over <a> and then hover over the <div> the style is applied as it ought to.

我更困惑，因为如果你添加:

I'm further confounded, because if you add:

div:hover ~ div {}

无论是否声明了样式，它都会按应有的方式开始工作.

with or without a style declared, it starts working as it ought to.

演示

我在以下位置看到了这个问题:

I see this problem in:

• 谷歌浏览器 15.0.874.121
• Safari 5.1.1

适用于 OS X.

有什么想法吗?

推荐答案

您可以通过在 body 元素上伪造动画来克服 Webkit 的伪类 + 通用/相邻兄弟选择器的错误:

you can overcome Webkit's pseudo classes + general/adjacent sibling selectors bugs by faking animation on the body element:

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

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

你可以在这里查看:http://jsfiddle.net/jalbertbowdenii/ds2yY/1/

这篇关于带有 `:hover` 和多个相邻兄弟选择器的 Webkit 错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！