5

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?

9
  • please post a fiddle. Oct 1, 2014 at 19:58
  • 2
    Looks good: plnkr.co/edit/G4lvVb0TPTwLsIwNVyd0?p=preview.
    – dfsq
    Oct 1, 2014 at 19:58
  • He wants it for different colors like .success, .warning etc. and in this case i guess you have to do this once per class. Oct 1, 2014 at 20:08
  • seem's like my idea wasn't too bad after all. Unfortunately, this means I'll have to find out in which way my page differs from the provided plunker example :( Thnaks @dfsq
    – omilke
    Oct 1, 2014 at 20:11
  • 3
    If you want to be selective, would it be easier to not use bootstrap's table-hover class, and instead just add your own css to add hover effects what you want?
    – Will
    Oct 1, 2014 at 20:12

4 Answers 4

10

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.

2
  • Nice, clean solution! Thank you!
    – rodamn
    Aug 27, 2015 at 4:23
  • I had to add .table-hover tbody tr:hover to your css selection too
    – Thomas
    Aug 8, 2019 at 17:08
5

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

1
  • To me it seems like a little too much effort, since this would actually require an additional hover-definition per different colour.
    – omilke
    Oct 2, 2014 at 13:51
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.