jquery - 除了我的鼠标悬停在什么地方，有没有办法可以对所有东西应用模糊？

Question

所以我有这个功能，我可以将鼠标悬停在一个小的 div 上，它会随着手头主题的更多信息而放大。我想知道我是否可以对页面的其余部分而不是我正在查看的 div 应用一些模糊。任何帮助都是极好的!

/* Simple hover code */
.skill-category-card {
  background-color: rgba(68, 79, 83, 0.68);
  width:260px;
  height:260px;
  text-align: center;
  border-radius: 5%;
  margin:50px;
  padding:0;
  float:left;
  transition: all 0.4s ease-in-out;
}
.skill-category-card:hover {
  margin:30px;
  width:300px;
  height:300px;
}

<!-- The divs I want to hover over -->

<div class="skill-category-card" id="web-des-skills">
          <i class="fas fa-pencil-alt" style="font-size:128px; position:absolute; margin:0; padding:0; transform:translate(-50%,25%);"></i>
          <h3>Web Design</h3>
        </div>
        <div class="skill-category-card" id="web-dev-skills">
          <i class="far fa-file-code" style="font-size:128px; position:absolute; margin:0; padding:0; transform:translate(-50%,25%);"></i>
          <h3 style="line-height:28px;">Web Development</h3>
        </div>
        <div class="skill-category-card" id="gfx-skills">
          <i class="far fa-image" style="font-size:128px; position:absolute; margin:0; padding:0; transform:translate(-50%,25%);"></i>
          <h3 style="line-height:28px;">Graphic<br />Design</h3>
        </div>
        <div class="skill-category-card" id="sfx-skills">
          <i class="fas fa-headphones-alt" style="font-size:128px; position:absolute; margin:0; padding:0; transform:translate(-50%,25%);"></i>
          <h3 style="line-height:28px;">Sound<br />Design</h3>
        </div>

Answer 1

因此，需要对您的 HTML 进行小规模重组才能实现 Hover on “Everything But” .

需要包装器 container 类来检测悬停，然后 blur 所有 :not :hover-编辑。

/* Simple hover code */
.skill-category-card {
  background-color: rgba(68, 79, 83, 0.68);
  width: 260px;
  height: 260px;
  text-align: center;
  border-radius: 5%;
  margin: 50px;
  padding: 0;
  float: left;
  transition: all 0.4s ease-in-out;
}

.skill-category-card:hover {
  margin: 30px;
  width: 300px;
  height: 300px;
  filter: blur(0px);
  -webkit-filter: blur(0px);
}

.container:hover > *:not(:hover) {
  filter: blur(8px);
  -webkit-filter: blur(8px);
}

<!-- The divs I want to hover over -->

<div class="container">
  <div class="skill-category-card" id="web-des-skills">
    <i class="fas fa-pencil-alt" style="font-size:128px; position:absolute; margin:0; padding:0; transform:translate(-50%,25%);"></i>
    <h3>Web Design</h3>
  </div>
  <div class="skill-category-card" id="web-dev-skills">
    <i class="far fa-file-code" style="font-size:128px; position:absolute; margin:0; padding:0; transform:translate(-50%,25%);"></i>
    <h3 style="line-height:28px;">Web Development</h3>
  </div>
  <div class="skill-category-card" id="gfx-skills">
    <i class="far fa-image" style="font-size:128px; position:absolute; margin:0; padding:0; transform:translate(-50%,25%);"></i>
    <h3 style="line-height:28px;">Graphic<br />Design</h3>
  </div>
  <div class="skill-category-card" id="sfx-skills">
    <i class="fas fa-headphones-alt" style="font-size:128px; position:absolute; margin:0; padding:0; transform:translate(-50%,25%);"></i>
    <h3 style="line-height:28px;">Sound<br />Design</h3>
  </div>
</div>

值得注意的一段 CSS 代码如下:

.container:hover > *:not(:hover) {
  filter: blur(8px);
  -webkit-filter: blur(8px);
}

本质上是做什么的:

1. 如果外层容器被hover-ed (.container:hover)
2. 对于所有子元素(> *)
3. 哪些不是 hover-ed (:not(:hover))
4. 执行blur(filter: blur(8px) 和-webkit-filter: blur(8px))

参见 JSFiddle供引用。

让我知道你是怎么处理的!