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

Question

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

a:hover + div {}

这有效。

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

div:hover + a + div {}

Webkit 崩溃了。

但是，如果您先将鼠标悬停在 <a> 上然后然后将鼠标悬停在 <div> 上应按应有的方式应用样式。

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

div:hover ~ div {}

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

Demo

我看到这个问题:

• 谷歌浏览器 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/