选择除悬停一个 CSS 之外的所有链接答案

【问题标题】：Selecting all links except hovered one CSS only选择除悬停一个 CSS 之外的所有链接
【发布时间】：2023-04-08 07:11:01
【问题描述】：

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

a:hover ~a

这很好用，但它只匹配悬停元素之后的元素，我也想获得之前的元素。所以我想用这个：

a:hover ~a,  a ~a:hover

但没有成功。

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

【问题讨论】：

标签： html css hover

【解决方案1】：

由于 CSS 选择器基于 DOM 层次结构的工作方式及其有限的遍历潜力，如果不使用 JavaScript，您将无法做您明确追求的事情。

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

Demo Fiddle

(and an alternative)

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

【讨论】：

那么你可能需要to add display: inline-block; 到包装器<div>
这正是我所要求的。谢谢！。 15 分钟过后，我很乐意接受这个答案。
如果有其他链接嵌套在其他元素jsfiddle.net/webtiki/ELA8b/4，这将不起作用
这可能是预期的，但它并没有回答实际提出的问题。除非div 元素悬停，否则选择器不匹配任何链接，因此它不匹配“除了悬停的链接之外的所有链接”。
这也有点奇怪，因为行为取决于封闭的div 是否悬停，而不仅仅是悬停的链接（如果有）。

【解决方案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 ; 
}

【讨论】：

【解决方案3】：

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

a[href]:not(:hover)

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

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

如果你真的想要一个匹配除悬停链接之外的所有链接的选择器如果有一个悬停链接，否则没有元素，那么就没有 CSS 解决方案（但有 JavaScript 解决方案)。

【讨论】：