本文讲解如何通过纯 css 实现导航区域悬停时，同步控制覆盖层（overlay）的背景色、字体颜色及垂直偏移，避免 javascript 依赖，修复 `z-index`、选择器作用域和定位失效等常见问题。
在您提供的代码中，核心目标是：当鼠标悬停于 .container（即导航容器）时，让 .title 元素显示为白色覆盖层，且其中文字变为白色；同时将该覆盖层整体下移（如距顶部 10px）。 当前问题源于三方面：
- CSS 选择器错误：.container:hover .title, a 表示“悬停时 .title 变黑 + 所有 <a> 标签变黑”，逻辑与需求相反；
- 层级与可见性冲突：.title 的 z-index: -1 使其被其他元素遮挡，即使 color: white 生效也看不见；
- 定位失效：top: 10px 在 position: absolute 下本应生效，但若父容器未设 position: relative，则绝对定位会相对于 <body> 计算，导致偏移不可控。
✅ 正确解法如下（纯 CSS，无需 JS）：
1. 修正 HTML 结构语义
确保 .title 是 .container 的子元素，并为其添加明确内容（否则空 div 不可视觉验证）：
<div class="container"> <div class="info">/* 导航链接 */</div> <div class="title">Welcome to Coozy Shoes</div> <!-- 添加文本内容 --> </div>
2. 关键 CSS 修正（推荐写法）
.container {
position: relative; /* 为 .title 的绝对定位提供参照 */
}
.title {
height: 150px;
background-color: white;
position: absolute;
top: 0; /* 初始位置：紧贴 container 顶部 */
left: 0;
width: 100%;
font-size: 25px;
text-align: center;
line-height: 150px; /* 垂直居中 */
color: black; /* 默认文字色（非白色！因白底需深色才可见） */
z-index: -1; /* 初始隐藏于导航下方 */
transition: all 0.8s ease;
}
/* 悬停时：提升层级、下移、变色 */
.container:hover .title {
z-index: 10; /* 高于导航，确保可见 */
top: 10px; /* 向下偏移 10px */
color: white; /* 文字变白（白底+白字？需注意对比度！） */
background-color: #000; /* 建议改为深色背景，或保留 white + color:black */
}⚠️ 重要提醒：
- 若 .title 背景为 white，文字设为 white 将不可见！实际场景中，覆盖层通常用半透明深色（如 rgba(0,0,0,0.8)）配白色文字，或白色背景配深灰文字。请根据设计调整：
.container:hover .title { background-color: rgba(255, 255, 255, 0.95); /* 白色半透 */ color: #333; /* 深灰文字，确保可读 */ } - 所有悬停样式必须使用 后代选择器（如 .container:hover .title），而非逗号分隔的独立规则，否则无法建立状态联动。
- 避免滥用 !important：它破坏 CSS 层叠逻辑，仅在调试第三方库冲突时临时使用，生产环境应通过提高选择器特异性（如 .container:hover .title > .title）解决优先级问题。
3. 进阶：平滑过渡与响应式优化
.title {
/* ...原有属性 */
opacity: 0;
transform: translateY(-20px); /* 初始上移隐藏 */
}
.container:hover .title {
opacity: 1;
transform: translateY(10px); /* 悬停时下移到目标位置 */
}配合 transition: opacity 0.4s, transform 0.4s，实现更自然的入场动画。
? 总结：纯 CSS 悬停控制覆盖层的核心在于——精准选择器 + 合理定位上下文 + 明确的层级与状态绑定。放弃 z-index: -1 隐藏方案，改用 opacity 或 visibility 配合 transition，既语义清晰又易于维护。
