为什么这个CSS选择器不起作用：a：hover~span？

Question

a:hover + span { background:yellow; }
a:hover > span { background:yellow; }
a:hover ~ span { background:yellow; }

前两个选择器工作得很好。但是，第三个选择器不起作用？

演示：http://jsfiddle.net/UAHw7/

为什么呢？

---

更新：我启动了所有浏览器......

Opera 11 - 作品
Safari 5 - 工作
Firefox 3.6 - 工作
IE9 RC - 工作
Chrome 9 - 无效

Chrome问题然后......

---

注意：由于Chrome不再包含此错误，因此该问题已过时。

Answer 1

看起来像是与使用:hover伪类相关的Webkit错误。

它适用于我

• in FF 3.6.13
所有浏览器的IE 8中的
• 在Opera 11中

它对我不起作用

• 在Chrome 9中
• 在Safari 5.0.3中

可能值得文件。

Answer 2

在我看来，你不能将一般兄弟选择器~与伪类:hover结合起来;请注意，如果您将选择器更改为a ~ span，则两个span元素都会变为黄色。

Answer 3

解决方案：

Chrome存在:hover问题。特别是<a>。

1. :hover在Chrome中不起作用：
   <a>Link</a>
2. :hover适用于Chrome：
   <a href="#">Link</a>
3. :hover适用于Chrome：
   <a href="javascript:void(0);">Link</a>

注意：您可以使用href="javascript:void(0)"代替href="#"。我更喜欢javascript:void(0)。