I've encountered a challenge with blurring all children of a parent when hovering over a specific child. While I've made some progress in achieving this effect, the previous child does not get blurred if you hover over the 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>My goal is to blur all children except the one being hovered over when selecting the second, third, or last child. Is there a way to achieve this using just CSS since a previous child selector doesn't exist? Am I overlooking something?