时间戳

首页 > 解决方案 > CSS 悬停属性不适用于嵌套 div

html - CSS 悬停属性不适用于嵌套 div

问题描述

我一直在做一个网页。我已经拿了一个 div 并且它有一个 h1 标题。我正在尝试提供相同的悬停（之前和之后）效果，但是我编写的代码似乎对我不起作用。请您向我解释一下，为什么它不起作用以及解决方法是什么？

这是HTML：

body,
html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background-repeat: space;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  animation: fadeInAnimation ease 2s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes fadeInAnimation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.section-intro {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
  margin-right: auto;
  margin-left: auto;
  background-repeat: no-repeat;
  background-size: cover;
  justify-content: center;
  justify-items: center;
  display: flex;
  background-image: url('../images/cc2dea0.jpg');
  /**nimation: slide ease 4s infinite;**/
}

.intro-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.intro-content h1:hover::before {
  color: palegreen;
}

.intro-content h1:hover::after {
  color: palegreen;
}
<div class="section-intro">
  <div class="nav-bar">
    /**anchor links**/
  </div>
  <div class="intro-content">
    <h1>
      h1 Header
    </h1>
  </div>
</div>

标签： htmlcss

解决方案

我相信您的代码不起作用，因为 ::before 和 ::after 伪元素必须具有“content:;” 在它们上设置的属性（最好是 content:""; "" 为空白）。此外，没有给出给定的高度或宽度，因此元素没有空间来显示您的颜色。最后，我相信您的意思是背景颜色而不是 ::after 和 ::before 的颜色，因为颜色是前文。

推荐阅读