css - Twitter Bootstrap 删除带有行条纹的表格行突出显示

Question

有没有一种简单的方法可以从 twitter bootstrap 中删除 tr:hover 样式，这样我仍然可以使用他们的表格样式而无需在悬停时突出显示行？

Answer 1

@Blender 的回答是正确的，但前提是您不在您的 table 上使用.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/