CSS - 当鼠标悬停在一个子元素上时，模糊除该子元素外的所有子元素。

Question

我一直在尝试实现当鼠标悬停在子元素时，将父元素的所有子元素进行模糊处理。目前我已经取得了一些成果，但是这并没有使先前的子元素变模糊（例如，如果你悬停在第二个子元素上）。以下是目前的代码：

.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>

我想要实现的效果是，当鼠标悬停在第二个、第三个或最后一个子元素上时，使除悬停元素外的其他所有子元素模糊。由于没有“previous child selector”，因此是否可能只使用纯CSS实现呢？我有什么遗漏吗？

- ask4you

Answer 1

是的，你可以这样做，但需要同时针对父元素和子元素，像下面这样：

我们称当鼠标悬停在子元素时，其父元素也将悬停，并且选择未被悬停的子元素，使它们变模糊。

.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>

- Huangism