必须显式声明transition: background-color 0.2s ease并配套:hover背景色，同时覆盖:focus/:active/:visited状态以确保多端一致；CSS变量--bs-dropdown-link-hover-bg需配合transition才生效，且深色模式需单独适配。
Dropdown项悬停背景色怎么加过渡动画
Bootstrap 默认的 .dropdown-item:hover 没有 transition，直接改背景色会“啪”一下跳变。要实现平滑色变，必须显式加 transition，且只作用于 background-color（别写 all，否则文字、阴影也会动，干扰体验）。
- 推荐写法：
.dropdown-item { transition: background-color 0.2s ease; } - 必须和
:hover配套使用，否则过渡无效：.dropdown-item:hover { background-color: #0d6efd; } - 如果用了 CSS 变量（Bootstrap 5.2+），
--bs-dropdown-link-hover-bg本身不触发 transition——变量值变化不会触发动画，得靠上面的transition规则兜底 - 别在
:focus或:active上单独加transition，容易和悬停冲突；统一用基础选择器声明即可
为什么:hover背景色没反应或跳变
常见不是代码没写，而是被更高优先级规则覆盖或状态打架。最常踩的坑是：只设了 :hover 背景色，但没同步处理 :focus 和 :active，导致鼠标移入、点击、键盘聚焦三种状态颜色不一致，视觉上像“跳变”。
- 检查 DevTools 的 Computed 样式，确认
background-color确实来自你写的:hover，而不是被--bs-dropdown-link-hover-bg或其他变量劫持 - 如果你改了
--bs-dropdown-link-hover-bg，但没在:root里设，而是在局部类里设（如.my-menu .dropdown-menu），那它只对后代生效，父级悬停仍走默认值 - 移动端 Safari 对
:hover支持弱，真机测试时可能完全不触发——这不是 bug，是规范行为；需要搭配.dropdown-item:focus做 fallback
用CSS变量统一控制悬停背景色（Bootstrap 5.2+）
比硬写选择器更稳，尤其项目支持深色模式时。变量名是 --bs-dropdown-link-hover-bg，它会影响 :hover、:focus 和 :active 三者，但注意：它不自动带 transition，仍需手动补。
- 全局生效（推荐）：
:root { --bs-dropdown-link-hover-bg: #e9ecef; }+.dropdown-item { transition: background-color 0.2s ease; } - 局部生效（避免污染）：
.custom-dropdown .dropdown-menu { --bs-dropdown-link-hover-bg: #f8f9fa; }，然后确保该类加在.dropdown容器上 - 深色模式适配：
@media (prefers-color-scheme: dark) { :root { --bs-dropdown-link-hover-bg: #343a40; } } - 别漏掉文字色同步：
--bs-dropdown-link-hover-color也要设，否则悬停时文字和背景反差过大
移动端悬停效果失效怎么办
真机上根本没“悬停”概念，iOS/Android 都不触发 :hover，除非用户长按（且行为不稳定）。所谓“平滑色变”，在移动端实际依赖的是 :active 或 :focus 状态。
- 验证方式：打开 Chrome DevTools → Toggle device toolbar → 切到 iPhone / Pixel 设备，点开下拉菜单，观察点击瞬间是否变色
- 修复思路：把悬停逻辑平移给
:active和:focus，例如：.dropdown-item:hover, .dropdown-item:focus, .dropdown-item:active { background-color: #0d6efd; transition: background-color 0.2s ease; } - Android Chrome 常把点击映射为
focus，iOS 则可能延迟几毫秒才触发，所以三个状态必须写在一起，不能拆开 - 如果下拉项是
<a>标签，还得加:visited，否则第二次点击背景色可能回退成紫色
.dropdown-item）上，而不是只挂在 :hover 里——否则动画根本不会启动。 
