:hover pseudo class 不适用于某些元素

Question

我在 .content 中放置了一个 :hover 选择器，但它不起作用，相反，只要悬停在背景上，悬停选择器就会起作用。当两个 .showcase:hover 都从 css 中删除时，它就会生效。相同的原因是什么？如果我同时需要 .content:hover 和 .showcase:hover 怎么办？

body {
  background: rgba(0, 0, 0, 0.9);
  margin: 0;
  color: #fff;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.showcase::before {
  content: "";
  height: 100vh;
  width: 100%;
  background-image: url(https://image.ibb.co/gzOBup/showcase.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: block;
  filter: blur(10px);
  -webkit-filter: blur(10px);
  transition: all 1000ms;
}

.content:hover{
  filter: blur(10px); /* why is this effect not working */
}

.showcase:hover::before {
  filter: blur(0px);
  -webkit-filter: blur(0px);
}

.showcase:hover .content {
  filter: blur(2px);
  -webkit-filter: blur(2px);
}

.content {
  position: absolute;
  z-index: 1;
  top: 10%;
  left: 50%;
  margin-top: 105px;
  margin-left: -145px;
  width: 300px;
  height: 350px;
  text-align: center;
  transition: all 1000ms;
}

.content .logo {
  height: 180px;
  width: 180px;
}

.content .title {
  font-size: 2.2rem;
  margin-top: 1rem;
}

.content .text {
  line-height: 1.7;
  margin-top: 1rem;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="index.css" />
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
      integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm"
      crossorigin="anonymous"
    />
    <title>Blur Landing</title>
  </head>

  <body>
    <header class="showcase">
      <div class="content">
        <img
          src="https://image.ibb.co/ims4Ep/logo.png"
          class="logo"
          alt="Traversy Media"
        />
        <div class="title">Welcome To Traversy Media</div>
        <div class="text">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae, vel.
        </div>
      </div>
    </header>
      </body>
</html>

Answer 1

您的选择器

.content:hover{
  filter: blur(10px);
}

正在被另一个选择器覆盖

.showcase:hover::before {
  filter: blur(0px);
  -webkit-filter: blur(0px);
}

无论您将鼠标悬停在上面，showcase 选择器都会生效。

解决方案是设置更具体的悬停选择器。

.content:hover, .showcase:hover .content:hover {
  filter: blur(10px); // Covers the "double" hover.
}

body {
  background: rgba(0, 0, 0, 0.9);
  margin: 0;
  color: #fff;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.showcase::before {
  content: "";
  height: 100vh;
  width: 100%;
  background-image: url(https://image.ibb.co/gzOBup/showcase.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: block;
  filter: blur(10px);
  -webkit-filter: blur(10px);
  transition: all 1000ms;
}

.content:hover, .showcase:hover .content:hover {
  filter: blur(10px);
}

.showcase:hover::before {
  filter: blur(0px);
  -webkit-filter: blur(0px);
}

.showcase:hover .content {
  filter: blur(2px);
  -webkit-filter: blur(2px);
}

.content {
  position: absolute;
  z-index: 1;
  top: 10%;
  left: 50%;
  margin-top: 105px;
  margin-left: -145px;
  width: 300px;
  height: 350px;
  text-align: center;
  transition: all 1000ms;
}

.content .logo {
  height: 180px;
  width: 180px;
}

.content .title {
  font-size: 2.2rem;
  margin-top: 1rem;
}

.content .text {
  line-height: 1.7;
  margin-top: 1rem;
}

<header class="showcase">
      <div class="content">
        <img
          src="https://image.ibb.co/ims4Ep/logo.png"
          class="logo"
          alt="Traversy Media"
        />
        <div class="title">Welcome To Traversy Media</div>
        <div class="text">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae, vel.
        </div>
      </div>
    </header>

:hover pseudo class 不适用于某些元素

:hover pseudo class not working on some elements

html

css

hover