如何在hover生效时让:not选择器实现其他卡片模糊效果？

核心思路 #

:hover:not(:hover)的写法逻辑矛盾，单个元素无法同时处于“悬停”和“非悬停”状态。正确的做法是借助卡片容器的悬停状态，结合子元素的选择器组合来实现效果。

具体实现步骤 #

假设你的HTML结构是容器包裹所有卡片（容器类为.card-container，卡片类为.card）：

<div class="card-container">
  <div class="card">卡片1</div>
  <div class="card">卡片2</div>
  <div class="card">卡片3</div>
</div>

对应的CSS写法分三步：

1. 给卡片添加过渡动画，让模糊效果更平滑：

.card {
  transition: filter 0.3s ease;
}

2. 当容器被悬停时，给所有卡片统一加上模糊效果：

.card-container:hover .card {
  filter: blur(4px);
}

3. 让当前被直接悬停的卡片取消模糊，恢复正常显示：

.card-container:hover .card:hover {
  filter: blur(0);
}

原理说明 #

鼠标悬停在任意卡片上时，父容器也会触发:hover状态，此时所有卡片都会被应用模糊样式。而被直接悬停的卡片会匹配优先级更高的.card-container:hover .card:hover选择器，覆盖模糊样式，最终实现“悬停卡片清晰，其余卡片模糊”的效果。

替代方案（JavaScript实现） #

如果需要更灵活的控制逻辑，也可以用JS监听鼠标事件：

const cards = document.querySelectorAll('.card');
cards.forEach(card => {
  card.addEventListener('mouseenter', () => {
    cards.forEach(otherCard => {
      if (otherCard !== card) otherCard.classList.add('blur');
    });
  });
  card.addEventListener('mouseleave', () => {
    cards.forEach(otherCard => otherCard.classList.remove('blur'));
  });
});

对应的模糊样式类：

.blur {
  filter: blur(4px);
  transition: filter 0.3s ease;
}

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