当有人使用 CSS 和 JS 悬停其中一个元素时如何模糊元素的其余部分

Question

.menu-container {
}

.menu-container .menu-option {
}

<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-foure" class="menu-option">Option Four</p>
</section>

我有四个带有这些 ID 的菜单元素（选项一、选项二、选项三、选项四）。

当有人将鼠标悬停在其中一个选项上时，他们会使用 JS 或 CSS 模糊其余选项，悬停元素之前或之后的选项都会被模糊，但悬停元素不会。

Answer 1

您可以使用这样的 CSS 来模糊任何未悬停的菜单选项。

.menu-option:not(:hover) {
  filter: blur(4px);
}

但您只想在其他菜单选项之一悬停时模糊菜单项，因此我们可以说，仅当未悬停的菜单选项位于还包含悬停菜单项的容器内部时才模糊菜单项，如下所示：

.menu-container:has(.menu-option:hover) .menu-option:not(:hover) {
  filter: blur(4px);
}

<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-foure" class="menu-option">Option Four</p>
</section>