bootstrap表格需添加.table-hover类并用.table-hover tbody tr:hover{background-color:#e9f7fe!important}覆盖默认悬停色，否则tr:hover无效。
Bootstrap表格默认不支持tr:hover悬停变色
Bootstrap 5 默认的 .table 类里没有定义 tr:hover 样式，即使你写了也不会生效——因为 Bootstrap 的行背景是通过 .table-striped（条纹）或 .table-hover（需显式启用）控制的，不是靠原生伪类驱动。
直接写 tr:hover { background-color: #f8f9fa; } 往往无效，原因有两个：一是 Bootstrap 的 .table-hover 已经接管了悬停逻辑；二是 CSS 优先级可能被 .table > tbody > tr > td 的背景覆盖。
- 必须确保表格有
.table-hover类（Bootstrap 5 要求） - 如果自定义悬停色，要覆盖 Bootstrap 的默认悬停样式（它用的是
rgba(0, 0, 0, 0.075)） - 避免只写
tr:hover，应加上作用域，比如.table-hover tbody tr:hover，防止影响表头
正确写法：用.table-hover + 自定义:hover规则
Bootstrap 提供了开箱即用的悬停支持，但颜色固定。想换颜色，就得重写它的 CSS 规则：
.table-hover tbody tr:hover {
background-color: #e9f7fe !important;
}
注意点：
-
!important是必要的，因为 Bootstrap 的.table-hover样式带!important（Bootstrap 5.3+ 源码中确有），不加很可能被覆盖 - 务必限定在
tbody内，否则thead tr:hover也会触发，导致表头误变色 - 不要用
td:hover替代 —— 它只能高亮单个单元格，不是整行
遇到tr:hover不生效的常见原因
不是代码写错，而是环境或细节没对上：
- 表格缺少
.table-hover类（仅.table不够） - CSS 文件加载顺序不对：你的自定义样式必须在 Bootstrap CSS 之后引入
- 用了
table.table-striped.table-hover，但.table-striped的隔行背景会干扰悬停效果（悬停时条纹色和 hover 色叠加，视觉混乱） - 某些框架（如 Vue + BootstrapVue）会动态渲染
tbody，导致选择器失效，此时得用.table-hover :is(tbody) tr:hover或 scoped CSS 处理
兼容旧版Bootstrap 4的写法差异
Bootstrap 4 的 .table-hover 悬停色是 #f5f5f5，且未使用 !important，所以覆盖时可省略：
.table-hover tbody tr:hover {
background-color: #e3f2fd;
}
但要注意：
- Bootstrap 4 不支持
:is()，别用 - 如果项目同时用了 Bootstrap 4 和 5 的 CSS，版本混用会导致悬停行为不一致
- 移动端 Safari 对
tr:hover支持弱，点击后才触发，建议搭配@media (hover: hover)做条件启用
.table-hover 就硬写 tr:hover，或者改了颜色却忘了 !important 和 tbody 限定。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
