为什么我的文本不会出现在悬停背景颜色上？答案

【问题标题】：Why wont my text appear over my hover background color?为什么我的文本不会出现在悬停背景颜色上？
【发布时间】：2021-10-16 02:19:06
【问题描述】：

这可能是一个非常菜鸟的问题，但我是菜鸟，所以我想知道为什么我的文字不会出现在我的背景颜色之上。我使用的 z-index 为 1000，但它仍然不会出现在上面。有任何想法吗？这是我的代码：

.careers {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80vh;
  background: #194d7e;
  }
  .square {
    position: relative;
    height: 400px;
    width: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .square span:nth-child(1) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px solid #fff;
    border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
    transition: .5s;
    animation: animate 6s linear infinite;
  }
  .square:hover span:nth-child(1) {
    border: none;
    background: #52b848;
  }
  .square span:nth-child(2) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px solid #fff;
    border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
    transition: .5s;
    animation: animate 4s linear infinite;
  }
  .square:hover span:nth-child(2) {
    border: none;
    background: #52b848;
  }
  .square span:nth-child(3) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px solid #fff;
    border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
    transition: .5s;
    animation: animate2 10s linear infinite;
  }
  .square:hover span:nth-child(3) {
    border: none;
    background: #52b848;
  }
  @keyframes animate {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  @keyframes animate2 {
    0% {
      transform: rotate(360deg);
    }
    100% {
      transform: rotate(0deg);
    }
  }
  .content {
    position: relative;
    padding: 80px 100px;
    color: #fff;
    text-align: center;
    transition: .5s;
    z-index: 1000;
  }
  .content a {
    position: relative;
    display: inline-block;
    margin-top: 10px;
    border: 2px solid #fff;
    padding: 6px 18px;
    text-decoration: none;
    color: #fff;
    font-weight: 600;
    border-radius: 73% 27% 44% 56% / 49% 44% 56% 51%;
  }
  .content a:hover {
    background: #fff;
    color: #194d7e;
  }

<div class="careers">
  <div class="container">
    <div class="square">
      <div class="content">
        <span></span>
        <span></span>
        <span></span>
        <h4>Ready to be a part of the solution?</h4>
        <p>Come grow your career with Renovo today!</p>
        <a href="#">Careers</a>
      </div>
    </div>
  </div>
</div>

【问题讨论】：

除非绝对必要，否则请不要链接到像 Codepen 这样的外部网站 - 我已将您的代码转换为堆栈片段，潜在的回答者和未来的访问者可以直接在正文中执行此问题你的帖子。外部链接往往会随着时间的推移而发生变化或中断，并且对于可能与您有类似或相同问题的未来访问者来说，这将失去任何价值。
更具体地说，对于您的问题，您在上面的 HTML 中包含的所有文本似乎都在运行 Stack Snippet 时出现，尽管作为文本颜色之间的对比（尤其是链接）接近不可读非常非常低。您能否详细说明您是如何得出的结论，即这是与您的元素的z-index 相关的问题...？
让我编辑我的代码，以便您更好地理解。 sn-p 没有在我的屏幕上显示什么，因为我的 css 嵌套在 vscode 上，我直接复制并粘贴了它。请稍等。
当您使用它时，请确保您在此处提供的代码符合构建代码minimal reproducible example 的指南。不遵守这些准则的帖子很难提供具体的、可操作的建议，也不太可能提供答案。
明白，请记住这一点，继续前进

标签： javascript html css wordpress visual-web-developer-2010

【解决方案1】：

您缺少.content 中h4 和p 标记上的文本样式。您可以将它们添加到您的 .content a {} 样式块中，然后提取 .content > a 的边框样式以应用边框。

.content a, h4, p{
            position: relative;
            display: inline-block;
            margin-top: 10px;
            padding: 6px 18px;
            text-decoration: none;
            color: #fff;
            font-weight: 600;
        }
        .content a {
            border: 2px solid #fff;
            border-radius: 73% 27% 44% 56% / 49% 44% 56% 51%;
        }

并且回复：z-index，它是一个相对的 CSS 属性，不会改变父子元素的堆叠。仅当您需要堆叠共享相同父级的元素时才使用z-index。

【讨论】：

啊，是的，就是这样。特异性总是让我着迷。非常感谢！
关于 z-index，容器类会被视为父类吗？如果是这样，我可以使用 z-index 在其中包含多个 div 类的容器中堆叠顺序吗？
是的，一个 div 容器被认为是其中的 div 的父级，也就是所谓的子级。