Javascript 悬停时模糊整个背景

所以我在头版上有一些内容，上面有一些动画。我想做的是，当你悬停在第一个节目上时，比如说Hunter X Hunter，我希望页面上的所有内容都模糊，不包括悬停在上面的内容

我环顾四周，看到了一些例子，但我觉得我的情况有点不同。首页上的所有项目都只是从数据库中回显出来

$fetch = mysqli_query($conn, "SELECT * FROM shows");
while($row = mysqli_fetch_array($fetch)){
    $ID = $row['ID'];
    $ShowName = $row['ShowName'];
    $ShowID = $row['ShowID'];
    $Updated = $row['Date'];
    $Poster = $row['Poster'];
    $Description = $row['Description'];

    echo '
    <div class="col s2 m2 2">
    <div class="card large">
    <div class="card-image">
      <img src="'.$Poster.'">
      <span class="card-title" style="color:white; text-shadow: 0 1px black;background:rgba(0,0,0,0.18);padding: 4px 8px;"><strong>'.$ShowName.'</strong></span>
    </div>
    <div class="card-content">
      <p>'.$Description.'</p>
    </div>
    <div class="card-action">
      <center><a href="player.php?showid='.$ShowID.'">Watch Now!</a></center>
    </div>
  </div>
  </div>
    ';
}

---

有人能指出出发的路吗？我有点被困在这个问题上。

有几种方法。最简单的方法是使用：hover和：not:hover选择器，在您的情况下，当您将鼠标悬停在父容器内时，这将模糊所有内容，但在您的情况下，悬停的子元素将保持不模糊

.集装箱{ 显示器：flex； } .卡片{ 保证金：1rem； } .container:hover>.card:not:hover{ 过滤器：4px； }

---

这是可行的，见下文：

HTML

可以在codepen上找到实时示例，如下所示：

---

其工作原理是，除非用户将鼠标悬停在页面主体上，否则我们不希望模糊任何列表项。这可以防止当鼠标指针悬停在浏览器的chrome或滚动条上时项目模糊。然后CSS语句将模糊所有li组件，但不是当前悬停的组件。

到目前为止，您编写了哪些CSS或javascript来解决这个问题？

<ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
  <li>d</li>
<ul>

body:hover li:not(:hover) {
  filter: blur(2px);
}