css - Twitter Bootstrap remove table row highlight with row stripes

Question

Is there a simple way to remove the tr:hover style from twitter bootstrap such that I can still use their table styling without getting the row highlight on hover?

Answer 1

@Blender 的答案是正确的，但前提是您没有使用.table-striped桌子上的课程。

如果您正在使用.table-striped该类，当您将鼠标悬停在具有浅灰色条纹的行上时，行突出显示不会消失。

当您将鼠标悬停在浅灰色行上时会发生什么，该行将从浅灰色变为透明（白色），因此您将无意中在所有浅灰色行上实现行悬停效果。

如果您还需要从条纹行中消除悬停效果，那么在 Blender 的原始答案的基础上，我认为您将有另一个规则可以覆盖：

.table tbody tr:hover td,
.table tbody tr:hover th {
  background-color: transparent;
}


.table-striped tbody tr:nth-child(odd):hover td {
   background-color: #F9F9F9;
}

很好的例子：这是一个工作 jsfiddle 示例的链接，其中 .table-striped 类占：http: //jsfiddle.net/pXWjq/

错误示例：这是一个表格行悬停仍然发生的示例（在灰色行上），因为未考虑灰色行悬停：http: //jsfiddle.net/448Rb/

​​​

Answer 2

Override these rules:

.table tbody tr:hover td,
.table tbody tr:hover th {
  background-color: #f5f5f5;
}

Using this:

.table tbody tr:hover td,
.table tbody tr:hover th {
  background-color: transparent;
}