CSS Selector to Match All Other Elements of Same Class Except Selected One ("This")

Question

I have multiple elements with the class .foo:

<a href="#" class="foo">Hello!</a>
<a href="#" class="foo">¡Hola!</a>
<a href="#" class="foo">Bonjour !</a>

When I hover over one of those, I want to be able to apply styling to all .foo elements, except the one that has been hovered over.

I suppose I'm looking for the CSS equivalent to $(this) in jQuery.

Something like this, perhaps:

.foo:hover::not(this) {
    color:fuchsia;
}

See this question and answers that followed. https://stackoverflow.com/q/8619406/8339821 — user14063792468, Jul 08 '19 at 00:03
Btw. SO suggest you topics based on yours. How come this are not showed up? — user14063792468, Jul 08 '19 at 00:05

score 1 · Accepted Answer · answered Jul 08 '19 at 00:01

Consider a container for your elements and you can easily do this:

.box {
 display:inline-block;
}
.box:hover a {
  color:red;
}
.box a:hover {
  color:initial;
}

<div class="box">
<a href="#" class="foo">Hello!</a>
<a href="#" class="foo">¡Hola!</a>
<a href="#" class="foo">Bonjour !</a>
</div>

1 Answers1