滑块必须是导航项的兄弟节点且位于末尾，通过:hover + .nav-slider或~ .nav-slider配合:nth-child()和transform: translatex()实现定位，transition需写在滑块基础样式中，ie11存在选择器组合失效问题。
滑块元素必须是导航项的兄弟节点，不能是子元素
横向滑块跟随效果的核心逻辑是：当鼠标悬停某个 <li> 时，通过 CSS 兄弟选择器（如 + 或 ~）定位到紧邻或后续的滑块元素，并用 transform: translateX() 或 left 动态调整其位置。如果把滑块写在 <li> 内部（比如作为 <span class="slider"></span>），就无法用纯 CSS 实现“hover 当前项 → 控制外部滑块”的联动——因为父元素 hover 无法向上影响祖先，更无法跨层级控制兄弟节点的兄弟节点。
正确结构示例：
<nav class="nav"><ul class="nav-list">
<li class="nav-item"><a href="#">首页</a></li>
<li class="nav-item"><a href="#">关于</a></li>
<li class="nav-item"><a href="#">服务</a></li>
<li class="nav-item"><a href="#">联系</a></li>
<li class="nav-slider"> <!-- 必须同级，且放在最后 -->
</ul></nav>
- 滑块
.nav-slider和所有.nav-item是同级兄弟 - 滑块必须放在列表末尾，否则
.nav-item:hover + .nav-slider会失效（+只匹配紧邻下一个兄弟） - 若需兼容非相邻场景，改用
~（通用兄弟选择器），但需确保滑块在 DOM 中位于所有导航项之后
用 :nth-child() 配合 hover 定位滑块偏移量
滑块本身不移动，而是通过 :hover 触发对应 .nav-item:nth-child(n) 的样式规则，再用 ~ .nav-slider 将偏移值传给滑块。关键在于：每个导航项 hover 时，给滑块设置不同的 transform: translateX() 值。
示例片段（假设每个 .nav-item 宽度固定为 80px，左外边距 16px）：
.nav-item:nth-child(1):hover ~ .nav-slider {
transform: translateX(0);
}
.nav-item:nth-child(2):hover ~ .nav-slider {
transform: translateX(96px); /* 80 + 16 */
}
.nav-item:nth-child(3):hover ~ .nav-slider {
transform: translateX(192px); /* (80 + 16) × 2 */
}
- 偏移量 =
(item-width + margin-left) × (n - 1)，注意:nth-child(1)对应第一个项，偏移为 0 - 若导航项宽度不等（如文字长度不同），CSS 无法动态计算，此时纯 CSS 方案失效，必须用 JavaScript 获取
getBoundingClientRect() - 别忘了给
.nav-slider设置position: absolute、top: 100%和固定高宽，否则 translate 不可见
transition 必须加在滑块上，而非 hover 规则上
动画效果靠 transition 实现，但它必须写在滑块自身的基础样式里，而不是写在 :hover 选择器中。否则滑块只会在进入 hover 状态时过渡，离开时立刻跳回原位。
错误写法（无退出动画）：
.nav-item:hover ~ .nav-slider {
transform: translateX(96px);
transition: transform 0.3s ease; /* ❌ 这里加无效 */
}
正确写法：
.nav-slider {
position: absolute;
top: 100%;
height: 4px;
width: 80px;
background: #007bff;
transform: translateX(0);
transition: transform 0.3s ease; /* ✅ 加在这里 */
}
-
transition属于“可过渡属性”的初始状态声明，不是行为触发条件 - 若同时需要滑块颜色/高度变化，可写成
transition: all 0.3s ease，但不推荐，容易误触其他不可控属性 - 移动端无 hover，此方案默认不生效；如需支持点击激活，得额外用 JavaScript 切换 class
IE11 及以下不支持 :nth-child() 在 hover 中的组合使用
虽然 :nth-child() 和 :hover 单独都支持 IE9+，但 IE11 存在一个冷门 bug：当 :nth-child(n):hover 与后续兄弟选择器（~）连用时，部分版本会忽略该规则。实测在 IE11 11.0.9600.19376 中偶发失效。
- 临时绕过方式：改用显式类名（如
.nav-item.is-active ~ .nav-slider），配合 JS 切换is-active - 更稳妥的做法是放弃纯 CSS，直接用
element.addEventListener('mouseenter', ...)计算位置并设置style.transform - 现代项目若已放弃 IE 支持，可忽略；但若需兼容企业内网老系统，这点极易成为上线后才发现的“幽灵问题”
滑块跟随看似简单，真正卡住人的往往不是怎么动，而是 DOM 结构是否允许它被定位、偏移值是否能静态穷举、以及老浏览器里那个根本不会报错却悄悄失效的选择器组合。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
