css – 具有`：hover’和多个相邻兄弟选择器的Webkit错误

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.

有任何想法吗？

解决方法

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

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

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

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