Twitter Bootstrap删除带有行条纹的表格行高亮显示

Question

有没有一种简单的方法可以从twitter bootstrap中删除tr: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/

buggy示例:这是一个示例,其中表行悬停仍然发生(在灰色行上),因为灰色行悬停不计入:http: //jsfiddle.net/448Rb/

Answer 2

覆盖这些规则:

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

使用这个:

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