仅使用CSS选择除悬停链接外的所有链接

Question

我正在尝试创建一个CSS选择器，它可以匹配除了悬停元素外的所有链接。自然而然地，我想到使用~运算符来捕获周围的元素。

a:hover ~a

这个代码可以正常工作，但是它只能匹配鼠标悬停在元素之后的元素，我也想获取之前的元素。因此，我考虑使用以下代码：

a:hover ~a,  a ~a:hover

但是没有成功。

---

这里有一个JSFiddle，展示了我所说的内容。
当然，我知道可以轻松使用jQuery实现，但是我喜欢尽可能地利用CSS，避免使用javascript。

- Valentin Mercier

Answer 1

由于CSS选择器基于DOM层次结构和其有限的遍历能力，你无法在不使用JavaScript的情况下达到明确追求的目标。

然而，考虑到我猜测您尝试实现的内容，为什么不将悬停效果应用于父元素，并排除当前悬停的 a 元素呢？

演示 Fiddle

(另一种方式)

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

- SW4

---

那么您可能需要在包装器<div>中添加display: inline-block;。链接 - Hashem Qolami

那正是我所要求的。谢谢！当15分钟过去时，我将很乐意接受这个答案。 - Valentin Mercier

如果其他链接嵌套在另一个元素中，则此方法将无效 http://jsfiddle.net/webtiki/ELA8b/4/ - web-tiki

这可能是预期的结果，但它并没有实际回答所提出的问题。选择器不匹配任何链接，除非悬停在一个 div 元素上，因此它不匹配“除悬停的链接之外的所有链接”。 - Jukka K. Korpela

@JukkaK.Korpela - 毫无疑问，在没有提出不使用JS的替代方案的情况下，并考虑到这个回答所针对的问题，我已经修改了答案文本，以明确之前假定已经理解的限制。 - SW4

Answer 2

演示（带绿色和红色）

CSS

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

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

- 4dgaurav

Answer 3

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

a[href]:not(:hover)

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

请注意，a 匹配所有 a 元素，包括已过时但仍可用的 <a name=...>...</a> 和有效的 <a>...</a>（在 HTML5 规范中提到）。使用 a[href] 限制了我们只能选择具有 href 属性即链接的 a 元素。

如果您实际上想要一个选择器，它可以匹配除悬停链接外的所有链接，如果 存在悬停链接且没有其他元素，则没有 CSS 解决方案（但有 JavaScript 解决方案）。

- Jukka K. Korpela