Bootstrap 5 中 .list-group-item:hover 无效，因其仅对带 .list-group-item-action 的元素启用悬停；必须同时保留两个 class，并覆盖 .list-group-item-action:hover 样式。
直接改 .list-group-item:hover 为什么没反应
不是 CSS 没写对，而是 Bootstrap 5 默认不给纯 .list-group-item 绑定悬停交互逻辑——它只在带 .list-group-item-action 的元素上启用 :hover。你写的 .list-group-item:hover 规则根本不会触发，开发者工具里也看不到该伪类生效。
常见错误现象：
- 鼠标划过无任何背景变化
- Computed Styles 中找不到
:hover对应的样式块 - 加了
!important也没用，因为选择器压根没匹配上
最稳妥的做法：用 .list-group-item-action
这是 Bootstrap 官方推荐、开箱即用的交互方案，自带 cursor: pointer、键盘焦点支持和无障碍语义，且不破坏原有边框、圆角、间距等布局。
实操建议：
- 必须同时保留
.list-group-item和.list-group-item-action，否则会丢失基础样式（比如上下 border 和 padding） - 悬停色直接覆盖
.list-group-item-action:hover即可，例如：.list-group-item-action:hover { background-color: #4dabf7; } - 若要避免全局污染，加自定义前缀，如
.my-list .list-group-item-action:hover - 不要依赖
.bg-*工具类：它们只作用于常态，.list-group-item.bg-primary:hover必须手动重写才生效
不用 .list-group-item-action？那得补全交互链
某些 CMS 或遗留结构强制使用 <div> 或无法添加 class，此时只能手动模拟交互行为。<p>必须补全以下三点，缺一不可：</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill4914" title="VPS Bootstrap"><img
src="https://img.php.cn/upload/skill/000/000/081/179025304626966.jpg" alt="VPS Bootstrap" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill4914" title="VPS Bootstrap">VPS Bootstrap</a>
<p>从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。</p>
</div>
<a href="/xiazai/skill4914" title="VPS Bootstrap" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<ul>
<li>加 <code>tabindex="0"，否则键盘用户无法聚焦
.list-group-item:hover、.list-group-item:focus、.list-group-item:active，否则 Tab 导航或点击时视觉割裂.disabled 状态样式，否则禁用项仍响应 hover注意：这种写法绕过了 Bootstrap 的交互体系，后续升级可能出兼容问题；移动端真机上 :hover 本身就不稳定，更建议用 :active + JS 监听 touchstart 做 fallback。
颜色生效但过渡生硬？检查是否被 background 简写覆盖
Bootstrap 默认设置了 transition: background-color .15s ease-in-out，但如果你用了 background: rgba(...) 这种简写，会把 background-image、background-position 等全重置，导致 transition 失效或闪烁。
正确做法：
- 只动
background-color，保持其他 background 属性不变 - 起止色值推荐用
hsl()或rgba()，方便微调节奏，例如从hsl(210, 5%, 95%)到hsl(210, 5%, 97%) - 高频悬停列表可加
will-change: background-color提升渲染性能（仅限必要场景） - 别忽略
.disabled和.active的干扰：它们会跳过原生:hover匹配，需用.list-group-item:not(.disabled):not(.active):hover显式限定
真正容易被忽略的是：.list-group-item-action 不是“可选优化”，它是 Bootstrap 5 中悬停交互的**唯一可靠入口**；所有绕过它的方案，都要自己扛住可访问性、移动端适配和未来升级成本。
