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

问题描述

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.

---

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.

解决方案

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.

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?

Demo Fiddle

(and an alternative)

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

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