悬停时模糊整个背景答案

【问题标题】：Blur entire background on hover悬停时模糊整个背景
【发布时间】：2019-02-28 10:57:47
【问题描述】：

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

谁能指出开始的方式？我有点卡在这个问题上。

【问题讨论】：

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

标签： javascript html css sass

【解决方案1】：

有几种方法。最简单的一种可能是使用:hover 和:not(:hover) 选择器，当您将鼠标悬停在父容器<div class="col s2 m2 2"> 内时，这将模糊所有内容，但悬停的子元素（<div class="card large"> in您的情况）将保持不模糊。

.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 事件来添加一个类。

【讨论】：

【解决方案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);
}

可以在 codepen 上找到实时示例：https://codepen.io/anon/pen/eXpmZL?editors=1100

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

【讨论】：