纯CSS无法实现真正随鼠标移动的底线滑动效果，因其:hover作用域受限且无法动态获取坐标；必须用JS读取getBoundingClientRect()并结合transform更新底线位置与宽度。
纯 CSS 无法实现真正“随鼠标移动”的底线滑动效果——它只能在固定位置之间切换，比如从一个菜单项滑到另一个，但做不到平滑跟随悬停目标的实时坐标。要动态定位，必须用 JS 读取 getBoundingClientRect() 并更新 transform。
为什么:hover + transition 不能让底线“追着鼠标跑”
CSS 的 :hover 是局部作用域：它只能影响自身或后代元素，无法让导航容器里一个独立的底线元素响应某个 a 的悬停状态。你写 .nav-item:hover .underline，前提是 .underline 是它的子元素；但那样每个菜单项都得带一条自己的底线，根本不是“共享滑动”的效果。
常见错误现象包括：
- 底线在每个链接下方独立出现/消失，没有滑动感
- 用
left或width动画，结果跳变、卡顿、错位 - 移动端点一下就闪退，因为
:hover在触摸设备上不触发
用 transform: translateX() + JS 实现真滑动的最小必要条件
底线元素必须脱离单个链接，作为独立节点放在 <nav> 内部，和所有 a 同级，并由 JS 控制其 transform 和 width。
立即学习“前端免费学习笔记（深入）”；
关键操作点：
-
.underline必须设position: absolute，且父容器（如.nav）设position: relative - 初始
transform: translateX(0)和width: 0，不能只靠transition隐式触发 - 监听
mouseenter时，用target.getBoundingClientRect()减去container.getBoundingClientRect()左边距，算出相对偏移值 - 更新样式必须在
requestAnimationFrame中执行，避免强制同步布局 - 记得监听
resize，窗口缩放后重新计算一次位置
transition 写在哪？只写 transform 和 width
动画主体是底线的位置和尺寸变化，所以 transition 必须直接写在 .underline 元素上，且只声明实际被修改的属性：
.underline {
transition: transform 0.3s ease-out, width 0.3s ease-out;
}
别写 transition: all——它会让颜色、阴影等无关属性也参与过渡，引发意外延迟或闪烁。更别把 transition 放在 .nav 上，那会干扰菜单文字的 hover 效果。
性能上，transform 触发重绘（repaint），left 或 width 会触发重排（reflow），尤其在 flex 布局或响应式页面中，后者极易偏移。
移动端适配不能只靠 :hover
纯 CSS 方案在 iOS Safari 和 Android Chrome 上基本失效。必须用 JS 绑定 click 和 touchstart，并兼容 focus（键盘用户）。如果用 mouseenter，记得加 mouseleave 回退逻辑：比如移出导航区域时，让底线缓慢缩回中间或收起，而不是突兀消失。
容易被忽略的一点：如果导航栏用了 transform: scale() 或 zoom，offsetLeft 就完全不可靠，必须统一用 getBoundingClientRect() 计算视觉坐标——这是响应式场景下的硬性要求。
