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

2022-01-22 00:00:00 hover html 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.


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;
}

相关文章