带有`：hover`和多个相邻兄弟选择器的Webkit bug

Question

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

a:hover + div {}

这很有效。

然而，当添加另一个相邻兄弟时：

div:hover + a + div {}

Webkit崩溃了。

但是，如果您首先将鼠标悬停在<a>和上，那么将鼠标悬停在<div>上，就会应用该样式。

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

div:hover ~ div {}

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

Demo

我在以下方面看到了这个问题：

• Google Chrome 15.0.874.121
• Safari 5.1.1

OS X的

。

有什么想法吗？

Answer 1

你可以通过伪造body元素上的动画来克服Webkit的伪类+一般/相邻的兄弟选择器错误：

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

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

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

Answer 2

或者，修复程序只能应用于具有更新问题的元素而不是body元素：

http://jsfiddle.net/ds2yY/12/

.force-repaint { -webkit-animation: bugfix infinite 1s; }

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

Answer 3

没有动画的轻松修复

处理类似问题here，其中this idea of changed pseudo-classes solved it（注意：nth-child(n)将始终匹配）：

div:hover + a:nth-child(n) + div