如何禁用Bootstrap带hover效果表格中指定行的hover状态

直接通过匹配Bootstrap hover样式的选择器优先级，将指定行的hover背景设置为unset即可，不会破坏原有背景样式（包括渐变、自定义色等场景）：

• 第一步：给需要禁用hover效果的行添加自定义类，比如no-hover
• 第二步：添加如下CSS规则：

/* 适配所有位置的tr，包括thead、tbody、tfoot内的行 */
.table-hover tr.no-hover:hover > * {
  background-color: unset !important;
}

如果不想使用!important，可以给你的表格额外加一个自定义类提升优先级，比如给表格加custom-table类，CSS改为：

.custom-table.table-hover tr.no-hover:hover > * {
  background-color: unset;
}

原理解释 #

1. 之前的写法不生效，是因为Bootstrap的.table-hover默认选择器优先级更高，它的默认规则是作用于行内的th/td元素，而非tr本身，仅修改tr的背景色无法覆盖hover效果
2. 用unset而非固定色值/透明色，可以让单元格完全继承行本身的原有背景样式，不会覆盖bg-gradient等原有类的效果

内容的提问来源于stack exchange，提问作者YKKY