如何淡化带有重叠文本的标题答案

【问题标题】：How to I fade a header with overlapping text如何淡化带有重叠文本的标题
【发布时间】：2021-07-25 08:17:10
【问题描述】：

所以我想在这里有两个不同的标题。一个显示我的名字，另一个显示我认为非常整洁的引用。我想让它们在悬停时改变。

我曾经遇到过这种情况，但两组不同的文本不是在彼此之上，而是在下面。

我尝试用一些 js 来解决这个问题，因为我见过有人做类似的事情（所以我想“哎呀为什么它不起作用）。

请原谅无聊的网站和代码，我 3 天前才开始编码（这也许就是为什么这对我来说似乎是一项艰巨的任务）。（它是一个测试网站，所以我选择了一个简单的主题......一份简历）

如果我能得到任何帮助，我将不胜感激。谢谢

function myFunction() {
  var element = document.body;
  element.classList.toggle("dark-mode")
}

body {
  font-family: Arial, Helvetica, News Courier;
  margin: 0;
}

.header {
  padding: 80px;
  text-align: center;
  background: #40826D;
  color: white;
}

.header:hover {
  background: #6e7f80;
  transition: 1s;
  color: #6e7f80;
}

.header h1 {
  font-size: 40px;
}

.text {
  font-size: 40px;
  opacity: 0;
}

.header:hover .text {
  opacity: 1;
  color: white;
  transition: 1s;
}

.navbar {
  overflow: hidden;
  background-color: #333;
}

.navbar a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 20px;
  text-decoration: none;
}

.navbar button {
  float: right;
  display: block;
  color: white;
  text-align: center;
  padding: 21px;
  text-decoration: none;
}

.navbar a.right {
  float: right;
}

.navbar a:hover {
  background-color: #ddd;
  color: black;
}

.dark-mode {
  background-color: black;
  color: white;
}

<div class="header">
  <div class="text">
    <h1 style="font-family: News Courier;text-align: left">Brene Brown</h1>
    <p style="font-family: News Courier;text-align: center"><i>There is no innovation and 
     creativity without failure</i></p>
  </div>
  <h1 style="font-family: News Courier">Luca S. Frias Serrano</h1>
  <p>a curriculum vitae</p>
</div>

<div class="navbar">
  <a target="_self" href="file:///Users/lucafrias/Downloads/HTML/CV.html">Home</a>
  <a target="_self" href="file:///Users/lucafrias/Downloads/HTML/pls%20save%20me.html">Personalia</a>
  <a target="_self" href="file:///Users/lucafrias/Downloads/HTML/academic%20career.html">Career</a>
  <a target="_self" href="file:///Users/lucafrias/Downloads/HTML/aboutme.html">About me</a>
  <div>
    <button onclick="myFunction()"></button>
    <script type="text/javascript">
    </script>
  </div>
  <a target="_self" href="file:///Users/lucafrias/Downloads/HTML/CV/contact%20me.html" class="right">Contact me</a>
</div>

<div style="text-align: center;font-family: News Courier">
  <h1>Welcome to my virtual curriculum!</h1>
  <h3>I hope this will give you a general idea of me.</h3>

  <p>This page will provide you with:</p>
  <p>My personalia</p>
  <p>Information about my academic career</p>
  <p>Information about my work experience</p>
  <p>Information regarding myself</p>
</div>

【问题讨论】：

能否请您解释得更好，我不明白您实际上想要实现什么
看起来您的淡入淡出正在悬停，我假设您希望淡入淡出动画在鼠标移出时淡入？也许您应该编辑您的问题，并更准确地说明您的预期结果。

标签： javascript html css

【解决方案1】：

您正在寻找display 属性。只需将opacity: 0 替换为display: none 并将opacity:1 替换为display: block。您可以检查它们之间的区别here

<!DOCTYPE html>
<html lang="en">
<head>
<title>Luca Frias</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
 body {
 font-family: Arial, Helvetica, News Courier;
 margin: 0;
}
.header {
padding: 80px;
text-align: center;
background: #40826D;
color: white;
}
.header:hover {
background: #6e7f80;
transition: 1s;
color: #6e7f80;
}
.header h1 {
font-size: 40px;
}
.text {
font-size: 40px;
display: none;
}
.header:hover .text {
 display: block;
 color: white;
 transition: 1s;
 }
 .navbar {
 overflow: hidden;
 background-color: #333;
 }
.navbar a {
 float: left;
 display: block;
 color: white;
 text-align: center;
 padding: 14px 20px;
 text-decoration: none;
 }
.navbar button {
 float: right;
 display: block;
 color: white;
text-align: center;
padding: 21px;
text-decoration: none;
}
 .navbar a.right {
 float: right;
 }
.navbar a:hover {
 background-color: #ddd;
 color: black;
 }
.dark-mode {
 background-color: black;
 color: white;
 }
</style>
</head>
<body>

<div class="header">
<div class="text">
<h1 style="font-family: News Courier;text-align: left">Brene Brown</h1>
<p style="font-family: News Courier;text-align: center"><i>There is no innovation and 
 creativity without failure</i></p>
 </div> 
 <h1 style="font-family: News Courier">Luca S. Frias Serrano</h1>
<p>a curriculum vitae</p> 
</div>

 <div class="navbar">
 <a target="_self" href="file:///Users/lucafrias/Downloads/HTML/CV.html">Home</a>
 <a target="_self" 
href="file:///Users/lucafrias/Downloads/HTML/pls%20save%20me.html">Personalia</a>
 <a target="_self" 
href="file:///Users/lucafrias/Downloads/HTML/academic%20career.html">Career</a>
 <a target="_self" href="file:///Users/lucafrias/Downloads/HTML/aboutme.html">About me</a>
    <div>
  <button onclick="myFunction()"></button>
  <script type="text/javascript">
    function myFunction() {
        var element = document.body;
        element.classList.toggle("dark-mode")
    }
  </script>
    </div>
  <a target="_self" href="file:///Users/lucafrias/Downloads/HTML/CV/contact%20me.html" 
 class="right">Contact me</a>
</div>

 <div style="text-align: center;font-family: News Courier">
 <h1>Welcome to my virtual curriculum!</h1>
 <h3>I hope this will give you a general idea of me.</h3>

    <p>This page will provide you with:</p>
    <p>My personalia</p>
    <p>Information about my academic career</p>
    <p>Information about my work experience</p>
    <p>Information regarding myself</p>
  </div>
  </body>
  </html>

如果有什么不符合您的预期。在评论区提及

【讨论】：

【解决方案2】：

你可以用纯 css 得到它：

<style>
    .header {
        display: block;
        width: 100%;
        height: 100%;
        text-align: center;
        background: #40826d;
        color: white;
        position: relative;
        font-family: News Courier;
    }
    .card {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        min-height: 400px;
        justify-content: center;
        color: white;
    }
    .c1 .title {
        text-align: left;
        font-size: 40px;
    }
    .c1 .text {
        text-align: center;
    }
    .c1 {
        padding: 0 5%;
    }
    .c2 {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        z-index: 2;
        font-size: 20px;
        opacity: 0;
    }
    .c2:hover {
        background: #6e7f80;
        opacity: 1;
        transition: 1s ease opacity;
    }
    .c2 .title {
        text-align: center;
    }
</style>
<div class="header">
    <div class="card c1">
        <h2 class="title">Brene Brown</h2>
        <p class="text">
            <i>There is no innovation and creativity without failure</i>
        </p>
    </div>

    <div class="card c2">
        <h2 class="title">Luca S. Frias Serrano</h2>
        <p>a curriculum vitae</p>
    </div>
</div>

我使用了“相对位置”和“绝对位置”。

在这种特殊情况下，只需将绝对定位的“卡片”与该集合居中：

    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;

并使用 z-index 获取位于 (.c1) 顶部的绝对定位“卡片”(.c2)

【讨论】：