如何使用CSS和JS实现鼠标悬停元素时模糊其余元素

纯CSS实现（推荐，无需JS） #

思路很直接：当鼠标悬停在容器上时，先给所有.menu-option元素加上模糊效果，再单独让当前被悬停的元素取消模糊，配合过渡动画让效果更自然。

HTML（注意原代码里option-foure是拼写错误，建议改成option-four，不影响功能但更规范） #

<section class="menu-container">
  <p id="option-one" class="menu-option">Option One</p>
  <p id="option-two" class="menu-option">Option Two</p>
  <p id="option-three" class="menu-option">Option Three</p>
  <p id="option-four" class="menu-option">Option Four</p>
</section>

CSS #

.menu-container {
  /* 可选：给容器加基础布局样式，按需调整 */
  padding: 1rem;
  gap: 1rem;
  display: flex;
  flex-direction: column;
}

.menu-container .menu-option {
  padding: 0.5rem;
  cursor: pointer;
  transition: filter 0.3s ease; /* 平滑过渡动画 */
}

/* 容器悬停时，所有子元素统一模糊 */
.menu-container:hover .menu-option {
  filter: blur(3px);
}

/* 单独让被悬停的元素保持清晰 */
.menu-container .menu-option:hover {
  filter: blur(0);
}

JavaScript实现方案 #

如果需要结合其他交互逻辑，用JS可以实现更灵活的控制：

HTML（和上面一致） #

<section class="menu-container">
  <p id="option-one" class="menu-option">Option One</p>
  <p id="option-two" class="menu-option">Option Two</p>
  <p id="option-three" class="menu-option">Option Three</p>
  <p id="option-four" class="menu-option">Option Four</p>
</section>

CSS #

.menu-container {
  padding: 1rem;
  gap: 1rem;
  display: flex;
  flex-direction: column;
}

.menu-container .menu-option {
  padding: 0.5rem;
  cursor: pointer;
  transition: filter 0.3s ease;
}

/* 定义模糊样式类 */
.blur {
  filter: blur(3px);
}

JavaScript #

// 获取所有菜单元素
const menuOptions = document.querySelectorAll('.menu-option');

// 给每个元素绑定鼠标进入/离开事件
menuOptions.forEach(option => {
  option.addEventListener('mouseenter', () => {
    // 给当前元素之外的所有元素添加模糊类
    menuOptions.forEach(item => {
      if (item !== option) item.classList.add('blur');
    });
  });

  option.addEventListener('mouseleave', () => {
    // 移除所有元素的模糊类
    menuOptions.forEach(item => item.classList.remove('blur'));
  });
});

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