如何使用:has()选择器实现hover时模糊前后兄弟卡片？

我写了一个包含三张文章卡片的代码，每张卡片带图片和描述。想实现鼠标悬停某张卡片时，模糊它的前后兄弟卡片。

我用~选择器只能选中后续兄弟元素：

.articles>*:hover ~ * {
    filter: blur(1px);
}

之后尝试用:has()选择器选中前序兄弟，但没生效：

.articles>*:hover:has(~ .articles>*) {
    filter: blur(1px);
}

是不是我的用法错了？以下是完整代码：

完整代码示例 #

CSS #

@import url("https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;800&display=swap");
body {
  font-family: "Work sans", Arial, Monospace, sans-serif;
  background-color: #282a3a;
}

h3 {
  font-weight: 800;
  font-size: clamp(1.13rem, calc(0.86rem + 1.05vw), 1.65rem);
  margin-block: 1rem;
  color: #10cab7;
}

p {
  font-weight: 400;
  font-size: calc(1rem + 1px);
  color: #829299;
}

.articles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  padding: 4rem;
  gap: 2rem;
  cursor: pointer;
}

.articles>* {
  transition: all 0.5s ease;
  background-color: #181823;
  border-radius: 4px;
  box-shadow: 2px 2px 2px 1.5px rgba(0, 0, 0, 0.306);
}

.articles>*:hover {
  box-shadow: 0px 2px 2px 3px rgba(0, 0, 0, 0.306);
  transform: scale(1.03);
}

/* 尝试给后续兄弟加模糊 */
.articles>*:hover~* {
  filter: blur(1px);
}

/* 尝试给前序兄弟加模糊（未生效） */
.articles>*:hover:has(~.articles>*) {
  filter: blur(1px);
}

.articles img {
  display: block;
  max-width: 100%;
  border-bottom: solid 3px;
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
  -webkit-border-image: linear-gradient( to left, rgb(5, 60, 64), rgb(0, 255, 157)) 27 / 35px;
  -moz-border-image: linear-gradient(to left, rgb(5, 60, 64), rgb(0, 255, 157)) 27 / 35px;
  -ms-border-image: linear-gradient(to left, rgb(5, 60, 64), rgb(0, 255, 157)) 27 / 35px;
  border-image: linear-gradient(to left, rgb(5, 60, 64), rgb(0, 255, 157)) 27 / 35px;
  border-image-width: 0px 0px 4px auto;
}

.articles .article-desc {
  padding: 2rem;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

HTML #

<div class="articles bkg-gray">
  <div class="article-1">
    <img src="https://i.imgur.com/nzK9N7l.png" alt="services">
    <div class="article-desc">
      <h3>Graphic Design</h3>
      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officia, velit? Inventore voluptas quis eveniet expedita numquam pariatur tempora.</p>
    </div>
  </div>
  <div class="article-2">
    <img src="https://i.imgur.com/5EOzUIQ.png">
    <div class="article-desc">
      <h3>Graphic Design</h3>
      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officia, velit? Inventore voluptas quis eveniet expedita numquam pariatur tempora.</p>
    </div>
  </div>
  <div class="article-3">
    <img src="https://i.imgur.com/7cnLyBD.png" alt="services">
    <div class="article-desc">
      <h3>Graphic Design</h3>
      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officia, velit? Inventore voluptas quis eveniet expedita numquam pariatur tempor.</p>
    </div>
  </div>
</div>

你之前的:has()用法错误，因为:has()只能从当前元素向下/向后选择，无法直接选中前序兄弟。更简洁的实现方式是利用父元素的:has()选择器，一次性选中所有非hover状态的子元素：

替换你原来的两个模糊相关CSS规则，改用下面的代码：

/* 当父容器内有子元素被hover时，给所有非hover的子元素加模糊 */
.articles:has(> *:hover) > *:not(:hover) {
  filter: blur(1px);
}

原理说明 #

• .articles:has(> *:hover)：选中内部存在hover状态子元素的父容器
• > *:not(:hover)：在该父容器下，选中所有未被hover的子元素，无论前序还是后续兄弟，统一添加模糊效果

这样就能完美实现「悬停某张卡片时，模糊其余所有兄弟卡片」的效果，同时保留当前hover卡片的清晰状态和缩放动画。

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