Twitter Bootstrap删除表行突出显示带有条纹 [英] Twitter Bootstrap remove table row highlight with row stripes

问题描述

有一个简单的方法来删除tr：hover样式从twitter bootstrap，使我仍然可以使用他们的表样式，而不会得到悬停的行突出显示？

解决方案

@ Blender的回答是正确的，但只有当你不使用 .table- striped

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

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

如果你还需要从条纹行中移除悬停效果，那么构建Blender的原始答案，我想你会有另一个规则：

  .table tbody tr：hover td，
 .table tbody tr：hover th {
 background-颜色：透明; 
} 
 
 
 .table-striped tbody tr：nth-​​child（odd）：hover td {
 background-color：＃F9F9F9; 
} 
  

好例子： jsfiddle示例，其中.table条件类被考虑：
http://jsfiddle.net/pXWjq/ p>

错误示例：这里有一个示例，表格行悬停仍然发生（灰色行），因为灰色行悬停未计入：
http://jsfiddle.net/448Rb/

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?

解决方案

@Blender's answer is right on, but only if you are not using the .table-striped class on your table.

If you are using the .table-striped class, the row highlight will not go away when you hover over a row that has the light-grey colored stripe.

What will happen when you hover over the light-grey row is that the row will change from light-grey to transparent (white), and thus you will be inadvertently implementing a row-hover effect on all the light-grey colored rows.

If you need to take away the hover effect from the striped rows as well, then building upon Blender's original answer, I think you would have another rule to over-ride:

.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;
}

good example: Here's a link to a working jsfiddle example where the .table-striped class is accounted for: http://jsfiddle.net/pXWjq/

buggy example: And here's an example where the table row hover still happens (on the grey rows) because the grey-row hover is not accounted for: http://jsfiddle.net/448Rb/

​

这篇关于Twitter Bootstrap删除表行突出显示带有条纹的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！