Is there a way to achieve an effect where hovering over one list item causes all other list items to fade out?
I'm searching for a method to style an element that is not being hovered, when one of its siblings is in the hovered state.
I've tried two different approaches:
1. Hover Detection on Parent Element
The issue with this approach is that hovering anywhere within the parent element triggers the effect, even between anchor tags which is not ideal. The effect should only be applied when directly hovering over the list item itself.
.d-flex {
display: flex;
justify-content: space-around;
}
.d-flex:hover a:hover {
color: black;
}
.d-flex:hover a {
color: white;
}
.d-flex a {
color: blue;
}<div class="d-flex">
<div class="item"><a href="#">item 1</a></div>
<div class="item"><a href="#">item 2</a></div>
<div class="item"><a href="#">item 3</a></div>
<div class="item"><a href="#">item 4</a></div>
</div>2. Using the General Sibling Combinator (~)
This approach is close, but it only selects siblings that appear after the element in the DOM.
.d-flex {
display: flex;
justify-content: space-around;
}
a {
color: black;
}
.item:hover ~ .item a{
color: white;
}
a:hover {
color: blue;
}<div class="d-flex">
<div class="item"><a href="#">item 1</a></div>
<div class="item"><a href="#">item 2</a></div>
<div class="item"><a href="#">item 3</a></div>
<div class="item"><a href="#">item 4</a></div>
</div>PLEASE NOTE: I am specifically seeking a CSS-only solution for this problem. While JavaScript can achieve this effect, I would like to avoid that route.