带有 `:hover` 和多个相邻兄弟选择器的 Webkit 错误
Posted
技术标签:
【中文标题】带有 `:hover` 和多个相邻兄弟选择器的 Webkit 错误【英文标题】:Webkit bug with `:hover` and multiple adjacent-sibling selectors 【发布时间】:2012-01-09 08:51:51 【问题描述】: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。
有什么想法吗?
【问题讨论】:
是的,这是一个 WebKit 错误。我偶尔会遇到它。除了:hover
ed 和它的父元素之外的元素没有更新。恐怕你无能为力。
有人在这里观察到完全相反的行为:***.com/questions/5061509/… 无论哪种方式,这绝对是一个 WebKit 错误,而且显然还没有完全修复。
我在more recent question 上找到了一个更优雅的解决方案,所以我在这里发布了一个类似的答案。
似乎也适用于 :checked 选择器。
【参考方案1】:
您可以通过在 body 元素上伪造动画来克服 Webkit 的伪类 + 通用/相邻兄弟选择器错误:
body -webkit-animation: bugfix infinite 1s;
@-webkit-keyframes bugfix
from padding: 0;
to padding: 0;
您可以在这里查看:http://jsfiddle.net/jalbertbowdenii/ds2yY/1/
【讨论】:
您甚至没有应用我在那里提供的修复程序,以及您正在使用的注释掉的选择器。这个解决方案解决了他的问题,没有理由投反对票。 这个错误在几乎相似的情况下仍然存在,这个解决方案不起作用 问题中不存在该错误,因此我真的知道您还想从我这里得到多少。或者你所期望的。如果您有任何问题,请将其发布给所有人。选择一个可接受的解决方案来满足您的需求并不是 SO 的目的 谢谢!我在我的文章中使用了这个Advanced Checkbox Hack 结合default checkbox hack 来修复android 上的WebKit 错误。 @albert 该错误仍然存在于 Webkit 中。不过,您的错误修复可以解决问题(谢谢!)。但是,在身体上不断制作动画是否存在性能问题?【参考方案2】:无需动画即可轻松修复
处理了类似的问题here,其中this idea of changed pseudo-classes solved it(注意:nth-child(n)
将始终匹配):
div:hover + a:nth-child(n) + div
【讨论】:
太棒了。多么晦涩的错误,以及一个简单的(如果是钝的)修复【参考方案3】:或者,修复可以仅应用于有更新问题的元素而不是正文元素:
http://jsfiddle.net/ds2yY/12/
.force-repaint -webkit-animation: bugfix infinite 1s;
@-webkit-keyframes bugfix
from fill: 0;
to fill: 0;
【讨论】:
以上是关于带有 `:hover` 和多个相邻兄弟选择器的 Webkit 错误的主要内容,如果未能解决你的问题,请参考以下文章