Twitter Bootstrap remove table row highlight with row stripes - css

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