悬停时模糊整个背景

所以我的首页上有一些项目，其中显示了一些动漫。我想做的是，当你将鼠标悬停在第一个节目“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 and :not(:hover)选择器，当您将鼠标悬停在父容器内时，它将模糊所有内容<div class="col s2 m2 2">，在您的情况下，但是正在悬停的子元素（<div class="card large">在你的情况下）将保持不模糊。

.container {
  display: flex;
}

.card {
  margin: 1rem;
}

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

<div class="container">
  <div class="card">
    <img src="http://placekitten.com/120/120">
  </div>
  <div class="card">
    <img src="http://placekitten.com/120/120">
  </div>
  <div class="card">
    <img src="http://placekitten.com/120/120">
  </div>
  <div class="card">
    <img src="http://placekitten.com/120/120">
  </div>
</div>

您还可以通过多种方式使用 JS 来做到这一点，例如，通过附加onmouseover添加班级的事件。