应为目标行添加no-hover类，并用.table-hover tbody tr.no-hover:hover{background-color:transparent!important;transition:none}覆盖默认悬停样式，因Bootstrap悬停规则权重高且含!important，必须全路径加!important才能生效。
如何用CSS禁用Bootstrap表格某行的hover效果
bootstrap默认会给 .table-hover 表格中每行（<tr>）添加 <code>:hover 背景色，但你无法通过修改类名或data属性直接“关闭”某一行的悬停——它靠的是css层叠，得手动覆盖。
最稳妥的方式是给目标 <tr> 添加一个自定义类（比如 <code>no-hover），然后在CSS里用更高优先级规则重置 background-color 和 transition：
.table-hover tbody tr.no-hover:hover {
background-color: transparent !important;
transition: none;
}
注意三点：
-
!important是必要的，因为Bootstrap的.table-hover tbody tr:hover规则权重高，且用了background-color: #f8f9fa - 必须写全选择器路径（
.table-hover tbody tr.no-hover:hover），否则可能被其他样式干扰 - 加上
transition: none可避免悬停时残留淡入动画，视觉更干脆
为什么不能只加 pointer-events: none
有人试过给 <tr> 加 <code>style="pointer-events: none"，看似能阻止hover触发，但副作用明显：
- 该行内所有可交互元素（如按钮、链接、复选框）全部失效，哪怕它们本身有
pointer-events: auto也救不回来 - 键盘导航（Tab键）会跳过这整行，可访问性受损
- 部分旧版IE不支持
pointer-events，兼容性差
所以这不是“禁用hover”，而是“禁用整行交互”，和需求不符。
如果表格没用 .table-hover 类，还用处理吗
不用。Bootstrap的hover高亮仅在表格有 .table-hover 类时生效；如果你的表格只有 .table，默认没有hover效果，自然无需干预。
但要注意：某些项目可能全局重写了 tbody tr:hover，或者引入了第三方插件（比如DataTables的默认主题），这时得 inspect 元素确认真实生效的CSS来源，再针对性覆盖。
Vue/React等框架里动态加 no-hover 类要注意什么
在组件中根据状态控制是否添加 no-hover 类没问题，但别漏掉两点：
- 确保CSS规则已加载——如果用CSS-in-JS或scoped style，要确认该规则没被作用域隔离（Vue的
<style scoped></style>需加::v-deep或/deep/） - 不要在
<tr> 上直接写 <code>class="no-hover"然后靠JS切换，而要用绑定语法（如Vue的:class="{ 'no-hover': isDisabled }"），避免静态类被覆盖hover不是JavaScript事件，它纯靠CSS，所以只要类名正确存在、CSS规则有效，就一定起作用——不需要监听或手动触发。
