最简单可靠的方式是使用.list-group-item-action类，它自带悬停交互、焦点状态处理及无障碍支持，且不破坏原有布局；若不用该类则需手动补全tabindex、focus/active等逻辑并注意移动端和可访问性问题。
用 .list-group-item-action 类是最简单可靠的方式
bootstrap 4 默认的 .list-group-item 不带悬停交互，直接写 :hover 也不生效——因为没绑定鼠标事件。官方方案就是加 .list-group-item-action 类，它自带 cursor: pointer 和灰色悬停背景（#f8f9fa），且不影响原有边框、圆角等样式。
- 必须同时保留
.list-group-item，否则丢失基础布局和间距 - 如果用了
<a>或<button>标签，这个类还能自动处理 focus/active 状态 - 不推荐只靠 CSS 写
.list-group-item:hover，在部分嵌套或禁用状态下可能失效
想改悬停色？覆盖 .list-group-item-action:hover 就行
Bootstrap 的悬停色是通过 .list-group-item-action:hover 定义的，优先级比普通类高，所以直接重写这个选择器最稳妥。别去动 .list-group-item:hover，它本来就不响应。
- 写法示例：
.list-group-item-action:hover { background-color: #4dabf7 !important; } - 加
!important是因为 Bootstrap 原生规则带:hover伪类，权重天然更高 - 如果只改局部列表，建议加自定义父类前缀，比如
.my-list .list-group-item-action:hover，避免全局污染
不用 .list-group-item-action？那得自己补交互逻辑
有些场景不能改 HTML 结构（比如 CMS 输出固定标签），或必须用 <div> 而非可交互元素。这时就得手动补上缺失的部分。
- 至少要加
tabindex="0"，否则键盘用户无法聚焦 - CSS 里必须写
.list-group-item:hover, .list-group-item:focus，不然只靠 hover 会忽略键盘导航 - 还得考虑
:active和禁用态（.disabled）的样式，否则体验割裂 - 这种做法绕过了 Bootstrap 的交互体系，后续升级容易出兼容问题
注意：颜色类（如 .bg-primary）对悬停无效
.bg-primary 这类背景工具类只作用于常态，不会自动延伸到 :hover。有人试过 <li class="list-group-item bg-primary">，发现悬停时还是变回灰色——这不是 bug，是设计如此。
- 想让
.bg-primary在悬停时也生效？只能自己写：.list-group-item.bg-primary:hover { background-color: #007bff !important; } - 别依赖
!important堆砌，最好统一收口到一个主题变量或 SCSS map 中管理 - 移动端 touch 设备没有 hover 概念，这类样式在 iOS/Android 上基本不触发，得额外考虑 tap 状态
<button> + ARIA）来替代纯视觉变化？否则改完色， accessibility audit 还是会报错。 
