直接写 :hover 不生效是因为 bootstrap 的高优先级规则覆盖了自定义样式；解决方法包括提高选择器权重、确保 css 加载顺序、或用版本匹配的 css 变量（如 5.3+ 用 --bs-list-group-bg-hover）覆盖。
为什么直接写 :hover 不生效？
Bootstrap 5 的列表组（.list-group）默认用 .list-group-item 包裹内容，而它的悬停样式由 Bootstrap 自带的 CSS 控制。如果你只写 .list-group-item:hover { background-color: #f8f9fa; }，大概率被 Bootstrap 的高优先级规则覆盖——尤其当它用了 !important 或更具体的选择器（比如 .list-group-item.active:hover）。
解决办法不是硬加 !important，而是提高选择器权重或复写正确位置：
- 用
.list-group .list-group-item:hover（增加父级上下文） - 或者直接复写 Bootstrap 的源码逻辑：它实际用的是
background-color: var(--bs-list-group-bg-hover)，所以改 CSS 变量更干净 - 确保你的自定义 CSS 在 Bootstrap CSS 之后加载
用 CSS 变量覆盖最稳妥
Bootstrap 5 支持通过 CSS 自定义变量控制悬停背景，不需要写新规则，也不怕被覆盖。只要在 <style></style> 或外部 CSS 中设置：
:root {
--bs-list-group-bg-hover: #e9ecef;
}
注意：--bs-list-group-bg-hover 是 Bootstrap 5.3+ 官方支持的变量；5.2 及更早版本用的是 --bs-list-group-hover-bg（已废弃）。检查你用的版本：
- Bootstrap 5.3+ → 用
--bs-list-group-bg-hover - Bootstrap 5.2 → 用
--bs-list-group-hover-bg - 不确定版本？打开浏览器开发者工具，选中一个
.list-group-item，在 Styles 面板搜hover，看它读取的是哪个变量
需要区分激活态和悬停态时怎么写？
如果既要悬停变色，又想保留 .active 的蓝色背景（比如导航菜单），就不能只靠变量——因为 --bs-list-group-bg-hover 会影响所有悬停项，包括 .active 项。这时得用更精确的选择器：
.list-group-item:not(.active):hover {
background-color: #f1f3f5;
}
.list-group-item.active {
background-color: #0d6efd !important;
}
关键点：
-
:not(.active)排除激活项，避免悬停覆盖激活色 -
.active规则加!important是必要的，因为 Bootstrap 默认的.list-group-item.active没用!important，但它的 specificity 更高，手动加可确保优先级 - 别漏掉
.list-group-item前缀——否则可能误匹配其他组件里的:hover
移动端点击反馈没效果？
在 iOS Safari 和部分安卓浏览器里，:hover 在触摸设备上默认不触发，导致“悬停”看起来没反应。这不是 CSS 写错了，是浏览器行为。要让点击也有背景反馈，得补充 :active：
.list-group-item:not(.active):hover,
.list-group-item:not(.active):active {
background-color: #f1f3f5;
}
但要注意：:active 是瞬时状态，松开手指就消失。如果想模拟“按压保持”，得用 JavaScript 监听 touchstart/touchend 动态加 class，纯 CSS 做不到持续反馈。
真正容易被忽略的，是变量名随 Bootstrap 版本变化这件事——复制网上旧教程的 --bs-list-group-hover-bg 在新版里根本不起作用，连 devtools 都查不到这个变量。动手前先确认版本，比调样式花的时间还多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
