为什么这个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不再存在此错误，因此该问题已过时。

- Šime Vidas

---

@tenfour 当你将鼠标悬停在锚点上时，所有三个SPAN元素都应该变成黄色... - Šime Vidas

有点奇怪。有趣的是，如果你去掉:hover伪类，它就能正常工作。 - Pekka

@Brad在Chrome 9中无法工作。 - Pekka

@Pekka：CSS3已经“正式发布”了吗？可能只是一些浏览器已经实现了它，而另一些还没有完全实现吗？ - Brad Christie

@Brad 没有，但是当我去掉:hover时它可以工作，这让我觉得这可能是一个bug或者至少是类似bug的现象 :) 编辑：它甚至可以在IE8中工作。 - Pekka

Answer 1

看起来是一个与使用 :hover 伪类相关的 Webkit bug。

对于我来说，它运行良好：

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

但对我来说不起作用：

• 在 Chrome 9 中
• 在 Safari 5.0.3 中

可能值得记录。

- Pekka

---

我不得不笑“所有浏览器中”，你是在暗示IE不总是兼容的吗？😁 - Brad Christie

似乎是Webkit的问题。在这里提到了：http://code.google.com/p/chromium/issues/detail?id=30753#c4 - Šime Vidas

@Šime 嗯，看起来就是这样。 - Pekka

真是太糟糕了... A:hover ~ B 是一个非常好的特性，但由于愚蠢的 Chrome，现在我不能使用它了 :)。 - Šime Vidas

@Šime 是的，这很不寻常！IE 8可以做到，但是尖端的Chrome却不能。这种情况并不经常发生。 :) - Pekka

Answer 2

在我的看法中，你不能将普通兄弟选择器~与伪类:hover组合使用；请注意，如果你将选择器更改为a ~ span，则两个span元素都会变成黄色。

- Sophie Alpert

Answer 3

解决方案：

Chrome存在一个:hover问题，特别是对于标签。

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

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

- user1725620

---

即使是第一个链接 <a>Link</a>，也适用于 Chrome 23。 - Ankur