鼠标悬停无反应是因为left仅对定位元素生效，需先设position: relative和left: 0初始值，再在hover中改变left值；推荐用transform: translateX()替代，性能更优且不触发重排。
transition 用 left 偏移导航链接时，为什么鼠标悬停没反应？
因为 left 只对定位元素（position: relative、absolute 或 fixed）生效。如果链接默认是 static 定位，设了 left 也不会动，transition 更无从触发。
- 必须给导航链接加
position: relative（最常用），再配left: 0作为初始状态 - 悬停时改
left值，比如left: 8px，transition 才能平滑过渡 - 避免用
position: absolute——它会脱离文档流，可能破坏导航栏布局或影响点击热区 - 注意：IE10+ 支持
left的 transition，但老版本 Safari 对left+transition有渲染延迟，优先考虑transform: translateX()
用 margin-left 做位移，和 left 有什么实际差别？
margin-left 不依赖定位，写起来更“直觉”，但它会真实改变文档流位置，容易引发父容器重排（reflow），性能略差；而 left 是视觉偏移，不触发重排，但需额外加定位声明。
- 如果导航项是 inline 或 flex 子项，
margin-left可能撑开间隙，导致整行错位；left则不会 -
margin-left在响应式缩放时可能被字体大小或父容器 padding 干扰，left更稳定 - 移动端滚动时，
margin动画易卡顿，transform（如translateX）才是硬件加速首选——left和margin都不走 GPU 加速
transition 要生效，哪些 CSS 属性必须成对出现？
transition 不是“设了就动”，它只作用于可动画的属性，并且初始值和目标值都得明确、可计算。常见漏掉的点：
- 必须显式声明初始状态，比如
left: 0，不能靠浏览器默认值（left: auto无法过渡） -
transition属性本身要写在常态（非 hover）规则里，不是 hover 里 - 避免混用单位：从
left: 0→left: 10px没问题，但从left: 0→left: 5%在多数浏览器中不支持过渡 - 别在 transition 中写
all，它会让所有变化属性都尝试过渡，包括color、font-size这类你没打算动的，反而增加意外行为
真正顺滑的位移，应该用 transform 而不是 left 或 margin
现代做法是放弃 left 和 margin，改用 transform: translateX()。它不触发重排，强制走合成层，动画帧率更稳，尤其在低端设备上差异明显。
- 写法很简单：
transform: translateX(0)初始，hover 时transform: translateX(6px) - 务必搭配
transition: transform 0.2s ease，不要写成transition: all - 如果导航链接有伪元素（比如下划线），用
transform移动整个元素，比单独移动伪元素更可控 - 注意：
transform的位移是相对于自身原点，不会像margin那样推挤兄弟元素——这点既是优点也是坑，调试时得确认是否真需要“不占位”的偏移
位移效果看着简单，但 left / margin / transform 的选择，本质是在控制权、性能和兼容性之间做取舍。很多人卡在 hover 没反应，其实只是忘了加 position: relative 或漏写了初始 left: 0 ——这些细节一漏，整个 transition 就静音了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
