选择除仅悬停一个CSS以外的所有链接 [英] Selecting all links except hovered one CSS only

问题描述

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

I'm trying to make a CSS selector that matches all links except the hovered one. Naturally I though of using the ~ operator to catch around elements:

a:hover ~a

此方法很好，但仅在将一个元素悬停后才匹配元素，我也想早点拿到。所以我虽然使用了这个：

This works fine but it only matches elements after the hovered one, and I would like to get the ones before as well. So I though of using this:

a:hover ~a,  a ~a:hover

但没有成功。

But no success.

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

Here is a JSFiddle that shows what I am talking about.
Of course I know I could do it easily with jQuery but I like to exploit CSS as much as possible when I think javascript can be avoided.

推荐答案

您由于CSS选择器基于DOM层次结构的工作方式以及遍历的潜力有限，因此无法使用JavaScript无法完成您明确的任务。

You cant do what you are explicitly after, without using JavaScript due to the way CSS selectors work based on DOM hierarchy and their limited potential for traversal.

但是，鉴于我的想象您正在尝试实现，为什么不将鼠标悬停在父元素上并排除当前悬停的 a ？

However, given what I imagine you are trying to achieve, why not apply the hover to the parent element and exclude the currently hovered a?

（和另一种ve）

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

这篇关于选择除仅悬停一个CSS以外的所有链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！