``hover`和多个相邻兄弟选择器的Webkit错误 [英] Webkit bug with `:hover` and multiple adjacent-sibling selectors

问题描述

Safari和Chrome以及Opera和Firefox可以处理：hover 伪类和相邻同级选择器：

a：hover + div {}

$ b

但是，当添加另一个相邻的同级时：

div：hover + a + div {}

Webkit崩溃。

但是，如果您先悬停在< a> 和然后将鼠标悬停在< div>

我进一步感到困惑，因为如果你添加：

div ：hover〜div {}

无论是否声明样式，都会开始工作。

演示

我在：

• Google Chrome 15.0.874.121


• Safari 5.1.1
$ b $




任何想法？

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

  body {-webkit-animation：bugfix infinite 1s; } 
 
 @ -webkit-keyframes bugfix {
 from {padding：0; } 
 to {padding：0; }您可以在这里查看：   /jsfiddle.net/jalbertbowdenii/ds2yY/1/rel =noreferrer> http://jsfiddle.net/jalbertbowdenii/ds2yY/1/  
 
Safari and Chrome, as well as Opera and Firefox, can handle the :hover pseudo-class and adjacent-sibling selectors:

a:hover + div {}

This works.

However, when another adjacent-sibling is added:

div:hover + a + div {}

Webkit falls apart.

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.

Demo

I see this problem in:


Google Chrome 15.0.874.121
Safari 5.1.1


for OS X.

Any ideas?
解决方案
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; } 
}
you can check it out here: http://jsfiddle.net/jalbertbowdenii/ds2yY/1/

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