You have a lot of elements with the same class and you want to make them all change when you hover over one of them. Also known as this stackoverflow question.
The old way either meant:
.foo:hover, .foo:hover ~ .foo: select yourself, and all the elements after you, but not before you.
CSS has a new selector:
that though still experimental on most browsers
would allow us to do what we want:
body:has(.foo:hover) .foo: select
.foowhich is a child of
Note: the above performs absymally, restricting to direct descendants is much faster:
body:has(> .foo:hover) > .foo