CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
omilke
omilke

Reputation: 837

Bootstrap table row hover with exceptions of some rows

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?

Upvotes: 5

Views: 6209

Answers (4)

Aidan
Aidan

Reputation: 5536

I could only get this to work with bootstrap by setting a no-hover background color, and using this in both the tr and td class definitions:

<tr class='no-hover'><td class='no-hover'>Some Text</td></tr>

.no-hover {
   background-color: blue;
}

If you want to specify the hover color also, you can add:

.table-hover tbody tr:not(.no-hover):hover td, .table-hover tbody tr:not(.no-hover):hover th {
    background-color: green;
}

Upvotes: 0

Will
Will

Reputation: 1299

Since you need to be more selective in terms of which rows you want the hover effect applied to, it's probably easier to create your own CSS hover effects rather than using bootstrap's table-hover class.

Demo (thanks dfsq for the base): http://plnkr.co/edit/INuppBzm7r4r7bqvCJm5?p=preview

You can use the following CSS (using not selector) to apply a background color on hover to table rows without a specific class.

CSS:

tr:not(.no-hover):hover {
    background-color: green;
}

Upvotes: 5

omilke
omilke

Reputation: 837

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.

Upvotes: 10

Markus Kottl&#228;nder
Markus Kottl&#228;nder

Reputation: 8268

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

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

and so on, i would say...

Upvotes: 0

Related Questions