必须将transition写在.nav-link初始态而非:hover中，否则动画不触发；因bootstrap默认无背景色，需显式设background-color起点值，并用高优先级选择器避免样式冲突。
直接给 .nav-link 加 transition 就行，但必须写在非 hover 状态下，否则动画不触发。
为什么 hover 时背景色没过渡？
常见错误是只在 .nav-link:hover 里写 transition，这完全无效——过渡属性必须定义在**初始态**（即未 hover 时），浏览器才能知道“从哪变到哪、怎么变”。
.nav-link { background-color: transparent; transition: background-color 0.2s ease; }.nav-link:hover { background-color: #0d6efd; }
如果用了 Bootstrap 的 .navbar-light 或 .navbar-dark，默认背景是透明或继承父级，所以得显式设初始 background-color，否则过渡起点不确定。
如何避免和 Bootstrap 默认样式冲突？
Bootstrap 5 的 .nav-link 默认没有背景色，hover 时仅改 color。你看到的背景变化大概率来自自定义类（比如 .nav-link.active 或你写的 .navbar-nav li a:hover）。检查开发者工具的 Styles 面板，确认目标选择器优先级足够高：
- 用更具体的选择器，例如
.navbar-nav .nav-link或.navbar-light .nav-link - 别依赖
!important，它会让后续覆盖变困难 - 如果导航项有 padding，确保背景色填充整个区域，必要时加
border-radius避免锯齿
移动端触摸设备上 hover 还生效吗？
不生效，这是浏览器设计行为，不是 bug。iOS Safari 和 Android Chrome 在触摸屏上基本不触发 :hover，除非用户“长按”模拟悬停（且不可靠）。如果你需要一致交互：
- 对关键操作（如跳转链接）保留点击逻辑，别只靠 hover
- 用
@media (hover: hover) and (pointer: fine)包裹 hover 样式，明确限定仅指针设备 - 别把可访问性依赖 hover —— 键盘
Tab+Enter必须能完成相同操作
真正容易被忽略的是：过渡动画是否在所有状态间都一致。比如 active、focus、hover 三者背景色变化节奏不同，用户会感觉割裂。统一用同一组 transition 值，比追求“更炫”更重要。
