Question

我正在尝试创建一个CSS选择器，匹配除了悬停的链接之外的所有链接。当然，我使用~运算符来捕捉元素：

a:hover ~a

这样可以正常工作，但它只匹配悬停的元素之后的元素，我也希望之前得到的元素。所以我虽然使用了这个：

a:hover ~a,  a ~a:hover

但没有成功。

这是一个JSFiddle，它显示了我在说什么。
当然我知道我可以用jQuery轻松完成它但我喜欢尽可能地利用CSS当我认为javascript可以避免。

Answer 1

由于CSS选择器基于DOM层次结构的工作方式及其有限的遍历潜力，您无法使用JavaScript而无需使用JavaScript。

但是，考虑到我想要实现的目标，为什么不将悬停应用于父元素并排除当前悬停的a？

Demo Fiddle

(and an alternative)

div:hover a:not(:hover){
    color:red;
}

Answer 2

Demo （绿色和红色）

CSS

a {
    color: #f00;
}
div {
    display: inline-block;
}

#scope1:hover > a, #scope2:hover > a{
       color : #0f0; 
}
#scope1 a:hover, #scope2 a:hover {
       color : #f00 ; 
}

Answer 3

以下选择器匹配除了悬停链接之外的所有链接：

a[href]:not(:hover)

当没有链接悬停时，这将匹配所有链接，这在逻辑上满足要求。

请注意，a符合所有a元素，包括<a name=...>...</a>（过时，但有效）和<a>...</a>（有效，在HTML5规范中提及）。使用a[href]会将我们限制为a个href属性的元素，即链接。

如果你真的想要一个匹配所有链接的选择器，除了一个悬停的链接如果有一个悬停链接而没有其他元素，那么就没有CSS解决方案（但是有JavaScript解决方案））。

选择除了仅悬停一个CSS之外的所有链接

3 个答案:

Demo Fiddle