下划线需用独立元素（如span）置于导航容器内并绝对定位，通过JS监听mouseenter/mouseleave及touchstart/focus事件，结合getBoundingClientRect计算位置，配合transform和width的transition实现平滑跟随。
导航栏下划线不跟鼠标，transform 用错位置了
常见错误是给 a 标签直接加 hover 和 transition，结果下划线在每个链接里独立出现、无法平滑移动。真正要动的是那个“共享”的下划线元素（比如一个 span 或伪元素），它得脱离单个链接，放在导航容器里统一控制。
实操建议：
- 用一个绝对定位的
span作为下划线，初始width: 0、left: 0 - 监听每个
a的mouseenter，读取它的offsetLeft和offsetWidth，再用transform: translateX()+width更新下划线位置尺寸 - 必须给下划线元素加
transition: transform 0.3s ease, width 0.3s ease，只写all容易卡顿
:hover 伪类没法跨元素联动，得靠 JS 监听
CSS 的 :hover 只能影响自身或后代，不能让父容器里的另一个子元素（如下划线）响应某个 a 的悬停。想让下划线“追着鼠标跑”，纯 CSS 没法做到动态定位——除非你放弃平滑过渡，改用每个 a 自带固定位置的伪元素下划线（那就不是“随鼠标移动”了）。
实操建议：
- 把下划线 DOM 节点放在
nav内部最末尾，和a同级 - 用
addEventListener('mouseenter', ...)绑定到每个a，避免用onmouseover（会冒泡触发多次） - 别忘了加
mouseleave回退逻辑：比如移出导航时，下划线缓慢缩回中间或收起
用 getBoundingClientRect() 比 offsetLeft 更可靠
如果导航栏有 padding、flex 布局或 transform 缩放，offsetLeft 会算不准位置，导致下划线偏移。尤其在响应式页面里，这个坑几乎必踩。
实操建议：
- 改用
link.getBoundingClientRect()获取相对于视口的位置，再减去nav.getBoundingClientRect().left得到相对导航容器的坐标 - 宽度直接取
link.offsetWidth即可，但注意它不含 padding 和 border（如需包含，用getComputedStyle算） - 所有数值计算后统一用
Math.round()，避免小数导致 subpixel 渲染模糊
移动端触摸失效？touchstart 和 focus 得补上
只监听 mouseenter 在手机 Safari 和部分安卓浏览器里完全没反应，因为没有“悬停”概念。用户点一下就触发，但不会持续高亮；而且键盘用户用 Tab 切换时也看不到下划线跟随。
实操建议：
- 同时监听
touchstart（阻止默认防止双击缩放）、focus（支持键盘导航） - 对
touchstart做节流，避免快速滑动时频繁重绘 - 用
prefers-reduced-motion媒体查询降级：匹配时直接禁用transition，改用即时切换
下划线动画看着简单，实际卡点全在坐标计算的参照系和事件兼容性上。最容易被忽略的是：导航容器本身如果有 overflow: hidden 或 transform，会截断绝对定位的下划线，得额外检查父级样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
