CSS技术咨询：hover子元素时模糊其余所有子元素的实现方案

我正尝试实现当hover父容器中的某个子元素时，模糊该父容器内的其他所有子元素。目前已完成的代码仅能模糊hover子元素之后的元素，无法模糊其之前的元素（例如hover第二个子元素时）：

现有代码 #

CSS #

.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);
}

HTML #

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

请问仅使用纯CSS是否可以实现该需求？我是否遗漏了某些方法？

纯CSS解决方案 #

可以实现，核心思路是利用父容器的hover状态统一处理所有子元素的模糊，再单独排除当前hover的子元素：

修改后的CSS代码 #

.child {
  height: 50px;
  width: 100px;
  /* 添加过渡动画让模糊效果更平滑 */
  transition: filter 0.3s ease;
}
.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; }

/* 父容器hover时，所有子元素默认模糊 */
.parent:hover > .child {
  filter: blur(15px);
}
/* 排除当前hover的子元素，取消模糊 */
.parent:hover > .child:hover {
  filter: blur(0);
}

原理说明 #

• 当鼠标悬停在任意子元素上时，父容器.parent也会触发hover状态，此时给所有子元素添加模糊效果。
• 通过.parent:hover > .child:hover选择器，让当前被hover的子元素取消模糊，这样就实现了“hover某一子元素时，其他所有子元素（包括前面的）都模糊”的效果。
• 额外添加transition属性可以让模糊切换更自然，提升交互体验。

内容的提问来源于stack exchange，提问作者ask4you