Applying a filter to all subsequent and previous sibling elements in CSS on mouseover

Question

I have a grid of elements that I want to appear in their unfiltered form when the page loads. When a user mouses over one of them, it should stay highlighted while the other elements fade to grey. I was able to get this working fine for subsequent elements but not the previous. I then came up with the following solution:

.child:hover {
  filter: grayscale(0);
  /*forces the 'active' element to stay unfiltered. */
}

.parent:hover>div {
  filter: grayscale(1);
  transition: filter 0.5s;
}

.parent>div {
  filter: grayscale(0);
  transition: filter 0.5s;
  /* so the transition back out is smooth */
}

<div class="parent">
  <div class="child">One</div>
  <div class="child">of</div>
  <div class="child">any</div>
  <div class="child">number</div>
  <div class="child">of</div>
  <div class="child">children</div>
</div>

The problem is that the fadeout occurs when a user places the cursors in the gaps between the elements as well - so if their placement is unlucky it will show everything in grayscale and look off.

I'd like to achieve this without using JavaScript if possible. I know that CSS doesn't have a built-in "previous siblings" selector, and I've tried various combinations of "has" and not gotten anywhere. Is this possible?

A Haworth · Accepted Answer · 2025-11-17 17:47:54Z

6

You don't need to do anything with the cell that is to be not-filtered, just select those cells which are not hovered on but when the parent has a cell that is hovered on.

Note: you don't need to set the transition conditions twice.

<style>
  .parent {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    width: 300px;
    gap: 20px;
  }

  .parent>div {
    filter: grayscale(0);
    transition: filter 0.5s;
    /* so the transition back out is smooth */
    background: cyan;
    /* just for demo so we can see the effect of filter */
  }

  .parent:has(>div:hover)>div:not(:hover) {
    filter: grayscale(1);
  }
</style>
<div class="parent">
  <div class="child">One</div>
  <div class="child">of</div>
  <div class="child">any</div>
  <div class="child">number</div>
  <div class="child">of</div>
  <div class="child">children</div>
</div>

answered Nov 17 at 17:47

A Haworth

37.5k4 gold badges17 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

chrisjfinlay Nov 18 at 8:36

Thank you! There's always something I miss with CSS...

Collectives™ on Stack Overflow

Applying a filter to all subsequent and previous sibling elements in CSS on mouseover

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related