CSS - blur all children except the hovered one, just when hovering over a children

user_18309173 0
Viewed 57

So I've been struggling with blurring all children of a parent when hover over a child. This is what I've achieved for now but this doesn't blur the previous child (if you hover second child, for example):

.child {
  height: 50px;
  width:100px;
}
.child:nth-child(1) {
  background-color: red;
}.child:nth-child(2) {
  background-color: yellow;
}.child:nth-child(3) {
  background-color: blue;
}.child:nth-child(4) {
  background-color: green;
}

.parent > .child:hover ~ .child:not(:hover) {
  filter: blur(15px);
}
<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

So what I want to achieve is, hovering over the second, third or last child, blur all the children except the hovered one. Is it possible to do with plain CSS, since there is no previous child selector? Am I missing something?

hover css-selectors css html
1 Answers

Yes you can but you need to target the parent and the child, like below

We say when parent is hovered(it is hovered when you hover over its child) and target the children which is not hovered, make them blurry

.child {
  height: 50px;
  width:100px;
}
.child:nth-child(1) {
  background-color: red;
}.child:nth-child(2) {
  background-color: yellow;
}.child:nth-child(3) {
  background-color: blue;
}.child:nth-child(4) {
  background-color: green;
}

.parent:hover .child:not( :hover ) {
  filter: blur(15px);
}
<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

user_10581340
Related