css – 具有`:hover’和多个相邻兄弟选择器的Webkit错误

前端之家收集整理的这篇文章主要介绍了css – 具有`:hover’和多个相邻兄弟选择器的Webkit错误前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
Safari和Chrome以及Opera和Firefox可以处理:hover伪类和相邻兄弟选择器:

a:hover div {}

这个工作.

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

div:hover a div {}

Webkit分崩离析

但是,如果您首先将鼠标悬停在< a>然后将鼠标悬停在< div>应用它的风格.

我进一步迷茫,因为如果你补充说:

div:hover〜div {}

有或没有宣布的风格,它开始工作,因为它应该.

Demo

我看到这个问题:

> Google Chrome 15.0.874.121
> Safari 5.1.1

对于OS X.

有任何想法吗?

解决方法

您可以通过在body元素上伪造动画来克服Webkit的伪类通用/相邻兄弟选择器错误
body { -webkit-animation: bugfix infinite 1s; }

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

你可以在这里查看:http://jsfiddle.net/jalbertbowdenii/ds2yY/1/

猜你在找的CSS相关文章