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

Question

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

a:hover + div {}

这有效.

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

div:hover + a + div {}

Webkit崩溃了.

但是,如果你第一次将鼠标悬停在<a>与随后的悬停<div>样式应用,因为它应该.

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

div:hover ~ div {}

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

我看到这个问题:

对于OS X.

有任何想法吗？

Answer 1

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

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

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

Answer 2

无需动画即可轻松修复

在这里处理了一个类似的问题,这个改变了伪类的想法解决了它(注意:nth-child(n)将始终匹配):

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

Answer 3

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

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

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