如何实现CV站头部重叠文本在鼠标悬停时的淡入切换效果？

核心问题原因 #

两组文本均为默认块级元素，会按文档流从上到下依次排列，因此出现上下分开的效果。只需通过定位让语录块与姓名块完全重叠，配合已写好的透明度切换逻辑即可实现效果，无需使用JavaScript。

具体修改操作 #

• 给头部容器加定位基准，确保内部元素相对于头部定位：
  在原有.header的CSS规则中添加position: relative;属性，修改后如下：

  .header {
    padding: 80px;
    text-align: center;
    background: #40826D;
    color: white;
    position: relative; /* 新增这一行 */
  }
  

• 给语录块加绝对定位，让它完全覆盖姓名块的显示区域：
  把原有.text的CSS规则替换为以下内容：

  .text {
    font-size: 40px;
    opacity: 0;
    position: absolute; /* 新增 */
    top: 80px; /* 和.header的padding-top值保持一致 */
    left: 0; /* 新增 */
    width: 100%; /* 新增，让内容占满头部宽度 */
  }
  

• 修正原有悬停时文字颜色与背景色一致的bug，同时添加默认内容的淡出逻辑：
  把原有.header:hover的CSS规则修改，同时新增默认内容的过渡规则：

  /* 原有规则修改 */
  .header:hover {
    background: #6e7f80;
    transition: 1s;
    color: white; /* 原来设成#6e7f80和背景同色，改成白色 */
  }
  
  /* 新增以下规则：实现默认显示的姓名、副标题悬停时淡出 */
  .header > h1:first-of-type,
  .header > p:first-of-type {
    transition: opacity 1s;
  }
  .header:hover > h1:first-of-type,
  .header:hover > p:first-of-type {
    opacity: 0;
  }
  

最终效果 #

• 默认状态下头部显示姓名和“a curriculum vitae”副标题，背景为深绿色
• 鼠标移入头部区域时，原有文字1秒内淡出，语录内容同步淡入，背景平滑过渡为灰调，完全符合需求
• 原有暗黑模式切换的JavaScript代码无需改动，可正常使用

内容的提问来源于stack exchange，提问作者Luca Frias