直接修改 .table-hover > tbody > tr:hover 的 background-color 并加 !important 才生效，因 Bootstrap 5 默认用 !important 锁定悬停色；推荐加自定义类局部覆盖或 Sass 变量层修改，并在移动端用 @media (pointer: coarse) 禁用 hover。
Bootstrap 5 表格悬停背景色怎么改
直接改 .table-hover > tbody > tr:hover 的 background-color 就行，但必须注意 CSS 优先级和作用域——Bootstrap 默认用 !important 锁死了悬停色，硬覆盖要带 !important 或提高选择器权重。
为什么加 !important 才生效
Bootstrap 5 的 .table-hover 悬停样式定义在 node_modules/bootstrap/scss/_tables.scss 中，编译后生成的 CSS 类似：
.table-hover > tbody > tr:hover {
background-color: #e9ecef !important;
}
这个 !important 是官方加的，目的是防止低优先级样式被意外覆盖。所以你自定义的样式不加 !important，基本无效。
- 别只写
.table-hover tr:hover { background: #f0f8ff; }—— 权重不够，且没匹配到 Bootstrap 的嵌套结构 - 推荐写法：用完全一致的选择器 +
!important，比如.table-hover > tbody > tr:hover { background-color: #f0f8ff !important; } - 如果用了 CSS-in-JS 或 Shadow DOM，
!important可能失效，得换用::part()或全局注入
如何避免污染全局或影响其他表格
直接改全局 .table-hover 会影响所有表格。更稳妥的做法是加自定义 class 并局部覆盖：
- 给表格加专属 class：
<table class="table table-hover my-table-hover"> - 对应写样式：
.my-table-hover > tbody > tr:hover { background-color: #e6f7ff !important; } - 这样不影响其他
.table-hover表格，也避免未来升级 Bootstrap 时样式冲突 - 如果项目用 Sass，建议在变量层改：
$table-hover-bg: #e6f7ff;，再重新编译 Bootstrap
移动端悬停效果要不要关
手机上没有鼠标悬停（hover），但部分 Android 浏览器或 Safari 会触发伪 hover，导致点击后残留高亮。如果发现点一下表格行就变色不恢复，就是这个原因。
- 可加媒体查询禁用移动端 hover：
@media (pointer: coarse) { .table-hover > tbody > tr:hover { background-color: transparent !important; } } - 或者更彻底：用 JavaScript 监听
touchstart移除 hover class，但多数场景直接关掉更省事 - 注意：Bootstrap 5.3+ 已默认对
pointer: coarse做了部分适配，但悬停色仍可能残留，手动处理更可靠
改完记得清缓存，尤其用了 CSS 预处理器时，变量修改后必须重新构建。另外，如果表格用了 .table-striped，悬停色会叠加条纹色，实际显示可能和预期不同，建议在真实数据下预览。
