悬停时模糊整个背景

Question

所以我的首页上有一些项目，其中显示了一些动漫。我想要做的是，当您将鼠标悬停在第一个节目“ 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>
    ';
}

任何人都可以指出起点吗？我对此有些困惑。

Answer 1

有两种方法。最简单的选择可能是利用:hover和: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事件来添加一个类。

Answer 2

这是可行的，见下文：

HTML

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

CSS

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

可在代码笔上找到在线示例：https://codepen.io/anon/pen/eXpmZL?editors=1100

这是如何工作的，除非用户将鼠标悬停在页面主体上，否则我们不希望模糊任何列表项。这样可以防止当鼠标指针悬停在浏览器镶边或滚动条上时项目变得模糊。然后CSS语句读取所有li组件的模糊效果，而不是当前悬停的那个。