:hover 不起作用，因为背景

Question

对于电影网站，我有一个带有颗粒纹理的移动背景来营造电影氛围。后来在网站上我想要一个 :hover 输入，但由于谷物背景，它似乎不起作用。

背景将附加到该部分，当您将鼠标悬停在 div 上并悬停 class 时，需要显示来自测试 div 的内容。

这是我的HTML和CSS：

.section {
  background-color: black;
  padding-top: 12rem;
  height: 1000px;
  width: 100vw;
}

.section:after {
  animation: grain 8s steps(10) infinite;
  background-image: url(https://previews.123rf.com/images/maximkostenko/maximkostenko1602/maximkostenko160200071/53576792-grain-texture-overlay-background-for-your-desig-dusty-overlay-texture.jpg);
  content: "";
  height: 300%;
  left: -50%;
  opacity: 0.05;
  position: fixed;
  top: -110%;
  width: 300%;
}

@keyframes grain {
  0%,
  100% {
    transform: translate(0, 0);
  }
  10% {
    transform: translate(-5%, -10%);
  }
  20% {
    transform: translate(-15%, 5%);
  }
  30% {
    transform: translate(7%, -25%);
  }
  40% {
    transform: translate(-5%, 25%);
  }
  50% {
    transform: translate(-15%, 10%);
  }
  60% {
    transform: translate(15%, 0%);
  }
  70% {
    transform: translate(0%, 15%);
  }
  80% {
    transform: translate(3%, 35%);
  }
  90% {
    transform: translate(-10%, 10%);
  }
}

.hover {
  width: 100px;
  height: 100px;
  background-color: red;
}

.test {
  display: none;
  color: white;
}

.hover:hover+.test {
  display: block;
}

<section class="section">
  <div class="hover">
  </div>
  <div class="test">test</div>
</section>

这是 JSFiddle：

https://jsfiddle.net/g8dhz14j/3/

当我尝试不带 .section:after 的代码时，代码有效。有人可以帮忙吗？

Answer 1

将 pointer-events: none; 添加到 .section::after 规则。

.section {
  background-color: black;
  padding-top: 12rem;
  height: 1000px;
  width: 100vw;
}

.section::after {
  animation: grain 8s steps(10) infinite;
  background-image: url(https://previews.123rf.com/images/maximkostenko/maximkostenko1602/maximkostenko160200071/53576792-grain-texture-overlay-background-for-your-desig-dusty-overlay-texture.jpg);
  content: "";
  height: 300%;
  left: -50%;
  opacity: 0.05;
  position: fixed;
  top: -110%;
  width: 300%;
  z-index: 0;
  pointer-events: none;
}

@keyframes grain {
  0%,
  100% {
    transform: translate(0, 0);
  }
  10% {
    transform: translate(-5%, -10%);
  }
  20% {
    transform: translate(-15%, 5%);
  }
  30% {
    transform: translate(7%, -25%);
  }
  40% {
    transform: translate(-5%, 25%);
  }
  50% {
    transform: translate(-15%, 10%);
  }
  60% {
    transform: translate(15%, 0%);
  }
  70% {
    transform: translate(0%, 15%);
  }
  80% {
    transform: translate(3%, 35%);
  }
  90% {
    transform: translate(-10%, 10%);
  }
}

.hover {
  width: 100px;
  height: 100px;
  background-color: red;
}

.blue {
  display: none;
  color: white;
}

.hover:hover+.blue {
  display: block;
}

<section class="section">
  <div class="hover">
  </div>
  <div class="blue">THIS IS A TEST</div>

</section>

Answer 2

:after 伪元素位于 .hover 元素之上。您可以使用 z-index:

更改它

.section {
  background-color: black;
  padding-top: 12rem;
  height: 1000px;
  width: 100vw;
}

.section:after {
  animation: grain 8s steps(10) infinite;
  background-image: url(https://previews.123rf.com/images/maximkostenko/maximkostenko1602/maximkostenko160200071/53576792-grain-texture-overlay-background-for-your-desig-dusty-overlay-texture.jpg);
  content: "";
  height: 300%;
  left: -50%;
  opacity: 0.05;
  position: fixed;
  top: -110%;
  width: 300%;
}

@keyframes grain {
  0%,
  100% {
    transform: translate(0, 0);
  }
  10% {
    transform: translate(-5%, -10%);
  }
  20% {
    transform: translate(-15%, 5%);
  }
  30% {
    transform: translate(7%, -25%);
  }
  40% {
    transform: translate(-5%, 25%);
  }
  50% {
    transform: translate(-15%, 10%);
  }
  60% {
    transform: translate(15%, 0%);
  }
  70% {
    transform: translate(0%, 15%);
  }
  80% {
    transform: translate(3%, 35%);
  }
  90% {
    transform: translate(-10%, 10%);
  }
}

.hover {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  z-index: 1;
}

.test {
  display: none;
  color: white;
}

.hover:hover + .test {
  display: block;
}

<section class="section">
  <div class="hover"></div>
  <div class="test">THIS IS A TEST</div>
</section>

:hover 不起作用，因为背景

:hover is not working, because of background

html

css

hover