带有`:hover` 和多个相邻兄弟选择器的 Webkit 错误 [英] Webkit bug with `:hover` and multiple adjacent-sibling selectors
问题描述
Safari 和 Chrome,以及 Opera 和 Firefox,可以处理 :hover
伪类和相邻兄弟选择器:
a:hover + div {}
这行得通.
但是,当添加另一个相邻兄弟时:
div:hover + a + div {}
Webkit 崩溃了.
我更加困惑,因为如果您添加:
div:hover ~ div {}
无论是否声明了样式,它都会开始正常工作.
我看到这个问题:
- 谷歌浏览器 15.0.874.121
- Safari 5.1.1
对于 OS X.
有什么想法吗?
您可以通过在 body 元素上伪造动画来克服 Webkit 的伪类 + 通用/相邻兄弟选择器错误:
body { -webkit-animation: 修正无限 1s;}@-webkit-keyframes 错误修正 {从 { 填充:0;}到 { 填充:0;}}
你可以在这里查看: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.
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屋!