本文详解如何使用纯 css（无需 javascript）实现导航区域悬停时，叠加层背景变为白色、文字颜色同步变为白色，并精准控制覆盖层垂直位置；重点修正 `z-index`、选择器作用域和定位逻辑等常见错误。
在您的原始代码中，.title 元素被设置为 position: absolute 且 z-index: -1，导致它被其他内容遮挡，无法正常响应 hover 效果；同时 .container:hover .title, a 这一选择器存在严重逻辑问题：逗号分隔表示「.container:hover .title」和「所有 a 标签」两个独立规则，因此 a 的样式会全局生效，而非仅在 hover 时触发，且无法继承 .title 的上下文状态。
✅ 正确做法是：将覆盖层（.title）作为 .container 的子元素，并利用父级 hover 状态统一控制其背景色与内部文字颜色。同时需确保覆盖层具有足够高的 z-index（如 z-index: 10），并使用 top 精确下移位置。
以下是优化后的完整 CSS（纯 CSS 方案，推荐优先使用）：
.container {
position: relative; /* 为绝对定位子元素提供参照 */
}
.title {
position: absolute;
top: 40px; /* ✅ 向下偏移 40px（可按需调整）*/
left: 0;
width: 100%;
height: 150px;
background-color: transparent; /* 初始透明 */
color: black; /* 初始文字色 */
font-size: 25px;
text-align: center;
z-index: 10; /* ✅ 高于其他内容，确保可见 */
transition: all 0.3s ease; /* 平滑过渡 */
display: flex;
align-items: center;
justify-content: center;
}
/* 悬停时：覆盖层变白 + 文字变白 */
.container:hover .title {
background-color: white;
color: white;
}
/* 可选：增强可读性，为 .title 内部链接单独定义样式 */
.title a {
color: inherit; /* 继承父级 color，自动随 hover 变色 */
text-decoration: none;
margin: 0 12px;
}
.title a:hover {
text-decoration: underline;
}? 关键要点说明：
立即学习“前端免费学习笔记（深入）”；
- ✅ position: relative 必须加在父容器（.container）上，否则 absolute 定位的 .title 会相对于 定位，造成错位；
- ✅ top: 40px 是有效下移方式（您之前尝试 top: 10px 无效，很可能因父容器未设 position: relative，导致定位基准错误）；
- ✅ 使用 color: inherit 让链接自动响应父级文字色变化，避免重复写死颜色；
- ❌ 避免滥用 !important —— 它会破坏 CSS 层叠逻辑，增加维护难度；优先通过提高选择器特异性（如 .container:hover .title a）或修正定位流来解决问题；
- ❌ 不推荐强制引入 JavaScript 控制显示/隐藏（如原答案中的 shower()/hider()），既增加复杂度，又违背“CSS 能解决就不用 JS”的最佳实践。
? 进阶提示： 若需覆盖层仅在导航区（.middle-side 或 .info）上 hover 时出现，可将 hover 事件绑定到对应容器，例如：
.info:hover .title { background-color: white; color: white; }并确保 .title 在 DOM 中位于 .info 内部或同级（通过 ~ 或 + 选择器联动），结构更语义化。
综上，纯 CSS 方案简洁、高效、可维护性强，完全满足“悬停显白底+白字+精准下移”三大需求——无需脚本，一行 top 值即可精确定位，一次 hover 规则即可统一样式。
