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'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/

​

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