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

Posted 2023-03-06

【中文标题】为啥这个 CSS 选择器不起作用：a:hover ~ span？

【英文标题】：Why doesn't this CSS selector work: a:hover ~ span?为什么这个 CSS 选择器不起作用：a:hover ~ span？

【发布时间】：2011-06-30 23:55:04

【问题描述】：

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 不再包含此错误，因此此问题已过时。

【问题讨论】：

@tenfour 当您将 ANCHOR 悬停时，所有三个 SPAN 元素都应亮起黄色...

很奇怪。有趣的是，如果你放弃 :hover 伪类，它会起作用。

对我有用...也许您的浏览器不支持 CSS3？ （甚至为了避免混淆而将其设为#FF00FF，并且在 FF4 上完美运行）

@Brad 在 Chrome 9 中不起作用

@Pekka：CSS3“正式发布”了吗？可能只是某些浏览器已经实现但还没有完全实现它？

【参考方案1】：

解决方案：

Chrome 有一个:hover 问题。尤其是<a>。

:hover 在 Chrome 中不起作用：<a>Link</a> :hover 在 Chrome 中工作：<a href="#">Link</a> :hover 在 Chrome 中工作：<a href="javascript:void(0);">Link</a>

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

【讨论】：

适用于 Chrome 23，即使是第一个 1 即 <a>Link</a>

【参考方案2】：

看起来像一个与使用 :hover 伪类有关的 Webkit 错误。

对我来说很好用

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

这对我不起作用

在 Chrome 9 中 在 Safari 5.0.3 中

可能具有文件价值。

【讨论】：

我不得不嘲笑“所有浏览器”。什么，你暗示 IE 并不总是合规的？ ：咧嘴：

似乎是 Webkit 问题。这里已经提到过：code.google.com/p/chromium/issues/detail?id=30753#c4

@Šime 是的，看起来像它

太糟糕了...A:hover ~ B 是一个很好的功能，现在我无法使用它，因为愚蠢的 Chrome :)

@Šime 是的，这很不寻常！ IE 8 可以做到这一点，但尖端的 Chrome 却没有。不会每天都发生。 :)

【参考方案3】：

在我看来，您不能将通用兄弟选择器~ 与伪类:hover 结合起来；请注意，如果您将选择器更改为a ~ span，那么span 的两个元素都会变为黄色。