Bootstrap 5 表格 hover 效果需同时添加 .table 和 .table-hover 类，且 tr 必须位于 tbody 内；触屏设备不触发 :hover，应改用 :focus 或点击高亮等替代方案。
Bootstrap 5 表格 hover 效果默认就生效，但前提是你用了正确类名
bootstrap 5 的 .table 类自带 :hover 样式，但只对带 .table-hover 类的表格起作用。很多人加了 .table 却没加 .table-hover，结果鼠标移上去完全没反应。
常见错误现象：tr 背景不变色、控制台无报错、CSS 检查发现 .table-hover tbody tr:hover 规则根本没加载（因为父级没匹配上）。
- 必须同时写
<table class="table table-hover">，缺一不可 - 如果用了
.table-striped，.table-hover仍有效，且会覆盖条纹色（高亮优先级更高） - 自定义主题或精简版 Bootstrap CSS（比如只引入了 grid/scss）时，
table-hover可能被漏掉，需确认 CSS 文件包含tables模块
自定义 hover 颜色时，别直接改 $table-hover-bg 变量就完事
改 Sass 变量确实能全局生效，但容易踩两个坑：一是变量只在编译时起作用，你用 CDN 引入的 CSS 就改不了；二是改了之后所有 .table-hover 表格都变色，可能违背设计需求。
更稳妥的做法是局部覆盖：
.my-table-hover tbody tr:hover {
background-color: #e8f4fc !important;
}
使用场景：后台列表页需要和主色调一致的 hover 色，但用户管理页又得用另一种浅灰。
- 务必加
tbody前缀，否则可能影响thead或tfoot的样式继承 - 加
!important是因为 Bootstrap 的 hover 规则带:not(.table-dark)等条件，权重较高 - 如果用的是 Bootstrap 4，hover 样式在
tbody tr:hover，Bootstrap 5 同理，但部分定制版本可能删减了这部分规则
Vue/React 里动态渲染表格，table-hover 失效？先检查 DOM 结构
框架组件中表格常被封装成 <Table> 或 v-for 生成 tr，但容易漏掉 tbody 标签——而 Bootstrap 的 hover 样式只作用于 tbody tr:hover，没有 tbody 就不触发。
错误结构示例：
<table class="table table-hover"> <tr><th>Name</th></tr> <tr><td>Alice</td></tr> </table>
正确结构（浏览器会自动补 tbody，但不能依赖）：
<table class="table table-hover">
<thead><tr><th>Name</th></tr></thead>
<tbody>
<tr><td>Alice</td></tr>
</tbody>
</table>
- Vue 中用
<tbody v-for>没问题，但外层不能丢<tbody>标签 - React 中如果用 Fragment（
<></>）包裹多行tr，会导致tbody缺失，必须显式写<tbody> - 用开发者工具检查真实 DOM，确认
tr确实在tbody内，而不是直接挂在table下
移动端 touch 设备上 hover 不触发？这不是 Bug，是预期行为
iOS 和 Android 浏览器默认不触发 :hover，除非用户点击过页面某处（伪“激活”状态），或者你用了 touchstart 事件强制触发。这意味着单纯靠 CSS 的 .table-hover 在手机上大概率没反应。
解决思路不是强行模拟 hover，而是换交互方式：
- 给
tr加role="button"和tabindex="0"，再用:focus样式做等效反馈 - 监听
click事件，给当前tr动态加一个临时高亮 class（如is-active），并用 CSS 过渡实现淡入效果 - 如果只是数据预览需求，不如改用
data-bs-toggle="tooltip"在 hover/click 时显示详情，比行高亮更可靠
真正麻烦的不是怎么加高亮，而是忘了 hover 在触屏设备上根本不可靠——这个点，上线前用真机测一次比调十遍 CSS 都管用。
