本文详解如何通过正确设置 z-index 和层叠上下文，确保导航菜单中链接文字在悬停时清晰可见，不被伪元素遮挡。核心在于为 <a> 标签赋予明确的正 z-index 值并配合 position: relative。
本文详解如何通过正确设置 `z-index` 和层叠上下文，确保导航菜单中链接文字在悬停时清晰可见，不被伪元素遮挡。核心在于为 `` 标签赋予明确的正 `z-index` 值并配合 `position: relative`。
在 CSS 悬停动画中，常见误区是误以为仅靠颜色变化或过渡就能保证文字可读性——实际上，当使用 ::after（或 ::before）伪元素创建覆盖式背景动画时，层叠顺序（stacking context） 才是决定文字是否“消失”的关键。
你当前的代码中，#nav-part2 h4::after 创建了一个灰色全尺寸覆盖层，并通过 bottom: -100% → 0 实现上滑入场效果。但问题在于：该伪元素默认与 <h4> 同级渲染，而 <a> 标签未建立独立层叠上下文，导致其被 ::after 完全覆盖（即使颜色设为白色，也因层级更低而不可见）。
✅ 正确解法非常简洁：
为 <a> 标签显式声明 z-index: 1 并保持 position: relative（这是触发 z-index 生效的必要条件）：
#nav-part2 h4 a {
color: #000000bb;
text-decoration: none;
position: relative; /* 必须存在，否则 z-index 无效 */
z-index: 1; /* 确保文字位于 ::after 之上 */
}⚠️ 注意事项：
- z-index: relative 是语法错误（z-index 只接受数字、auto、inherit 等值），原代码中的 z-index: relative 不生效，导致文字始终处于底层。
- ::a 是非法伪元素选择器（CSS 中不存在 ::a），#nav-part2 h4:hover::a 规则完全无效，应删除；文字颜色应在 #nav-part2 h4:hover a 中设置：
#nav-part2 h4:hover a { color: white; } - box-sizing: 0 应为 box-sizing: border-box（原代码拼写错误）。
- font-family: border-box 属于无效值，建议替换为实际字体族（如 system-ui, sans-serif）。
? 完整修正后的关键 CSS 片段如下：
#nav-part2 h4 {
padding: 10px 20px;
border: 1px solid #8a8a8a89;
border-radius: 50px;
font-weight: 500;
color: #000000bb;
position: relative; /* 为 ::after 提供定位上下文 */
font-size: 18px;
transition: all ease 0.4s;
overflow: hidden;
}
#nav-part2 h4::after {
content: "";
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background-color: gray;
border-radius: 50%;
bottom: -100%;
transition: bottom 0.4s ease, border-radius 0.4s ease;
}
#nav-part2 h4:hover::after {
bottom: 0;
border-radius: 0;
}
/* ✅ 关键修复：提升链接层级 */
#nav-part2 h4 a {
color: #000000bb;
text-decoration: none;
position: relative; /* 必需 */
z-index: 1; /* 必需：高于 ::after */
}
#nav-part2 h4:hover a {
color: white;
}? 总结：CSS 层叠并非“谁写在后面谁在上”，而是由 层叠上下文（stacking context） 和 层叠级别（stack level） 共同决定。只要为需要前置的元素（如 <a>）设置 position + z-index，即可稳定控制其相对于伪元素的显示优先级。这是实现美观且可用的悬停效果的基础保障。
