[2.0.3] Disable table row hover effect

All tables with a class of table automatically receive a row hover effect.

Keeping in line with the other table features that Bootstrap offers, it would be great if this effect is not enabled by default. Perhaps a new row-hover class would be enable the feature.

At the very least it would be nice to have a class in Bootstrap that disables the hover effect.

[mchiocca]

I’m using a jQuery datatable implementation from http://www.datatables.net along with a ThemeRoller theme that includes a row hover effect that I like and wanted to keep.

When I upgraded to 2.0.3 the Bootstrap row hover took over, with a color that is not what I wanted. I found the row hover CSS and was able to override it.

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

Using inherit allowed the jQuery datatable row hover color to be used instead, which is the one that I wanted.

[skyriverbend]

For those still on 2.0, here’s a full code snippet for disabling table hover-over:

.table-disable-hover.table tbody tr:hover td,
.table-disable-hover.table tbody tr:hover th {
    background-color: inherit;
}
.table-disable-hover.table-striped tbody tr:nth-child(odd):hover td,
.table-disable-hover.table-striped tbody tr:nth-child(odd):hover th {
  background-color: #f9f9f9;
}

To use this snippet, just add the .table-disable-hover class to your table.