本文详解如何通过纯 css 实现导航区域悬停时显示白色覆盖层，并同步改变其中文字颜色为白色（或对比色），同时精准控制覆盖层垂直位置；无需 javascript，避免冗余逻辑与样式冲突。
要实现“鼠标悬停导航区域时，覆盖层变为白色且文字变白，并下移至指定位置”，关键在于正确理解 dom 结构、css 层叠顺序（z-index）与伪类作用域。原代码中存在多个典型问题：.container:hover .title, a 的选择器语法错误（逗号导致 a 独立生效，脱离 hover 上下文）、.title 的 z-index: -1 使其被内容遮挡、未对导航链接设置显式颜色继承/覆盖，以及 top: 10px 在绝对定位中默认以最近定位祖先为参考——若 .container 未设 position: relative，则 top 会相对于
计算，造成偏移不可控。
✅ 正确做法如下：
1. 结构优化：确保覆盖层与导航同级且可被 hover 触发
将 .title（覆盖层）置于 .info 内部末尾，与导航链接平级，并包裹在具有 position: relative 的容器中：
2. CSS 样式修正：精准控制悬停状态与层级
.container { position: relative; /* 关键：为 .title 的 absolute 定位提供参照 */ } .info { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 1rem 2rem; } .title { position: absolute; top: 100%; /* 紧贴 .info 下方，比 top: 10px 更可靠 */ left: 0; width: 100%; height: 150px; background-color: white; color: white; font-size: 25px; text-align: center; z-index: 1; /* 大于默认值，但低于 hover 激活态 */ opacity: 0; visibility: hidden; transition: all 0.3s ease; } /* 悬停 .info 时激活覆盖层，并统一设置文字颜色 */ .info:hover .title { opacity: 1; visibility: visible; z-index: 10; } /* 同时修改 .info 内所有链接文字颜色（悬停时） */ .info:hover a { color: white !important; /* 强制覆盖内联或外部样式 */ text-decoration: none; } /* 可选：为链接添加过渡效果 */ .info a { color: #333; text-decoration: none; transition: color 0.3s; }3. 注意事项与避坑指南
- ❌ 避免滥用 !important：仅在必要时（如第三方库样式冲突）使用，优先通过提高选择器特异性（如 .info:hover a > a）解决。
- ❌ 不要将 z-index: -1 用于需交互的覆盖层：它会沉入背景，导致无法触发 hover 或点击。
- ✅ top: 100% 比 top: 10px 更语义化且稳定——确保覆盖层始终紧贴导航底部，不受父容器 margin/padding 干扰。
- ✅ 使用 opacity + visibility 组合实现淡入效果，比单纯 display: none/block 更平滑且保留文档流占位（避免布局抖动）。
总结
纯 CSS 方案完全可胜任该需求：通过合理嵌套结构、position: relative 锚定、top: 100% 精准定位，配合 :hover 伪类批量控制子元素样式，即可实现覆盖层显隐、背景色切换、文字变色及位置微调。javaScript 在此场景属于过度设计，反而增加维护成本与兼容性风险。