Bootstrap table row hover with exceptions of some rows

Question

I have a table that supports hovering via class="table-hover". However, I want certain rows (that have different colours) not to be highlighted upon hovering.

I have copied the hover rule from bootstrap and adjusted to it tr.no-hover:

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

My idea was, that this way it should display the orginal (ie. unhovered) colour of the row, since I wanted the no-hover to genericly apply to differently coloured rows. But that did not work. Neither did specifying transparent as colour.

Essentially, what I need is to remove the hover-effect on some rows. Is there any way to do this?

Answer 1

For everyone interested how to get this to work, I found a solution which works with removing the hover-effect without specifying a seperate hover-colour for each colour in use.

http://plnkr.co/edit/phGI6csBqmOXML1spLV4?p=preview

The key point here is to set the custom colour on the tr element, that way the cells will be coloured correctly and additionally with

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

what is inherited, is the colour of the tr.

Unfortunately I don't have an IE at hand to test its behaviour.

This is especially useful, when you use custom colours in some of your table rows and the rest should be Bootstrap's default colours. That way you don't have to replicate Bootstrap's hover colour.