Bootstrap table-hover for all rows, not just every other

Question

I'm using Bootstrap 3 and applied table-striped table-hover to my table's class.

However, I have changed the default striped color to green. So I have green - white - green - white for my columns.

Now, when I hover, the white turns to blue. This is fine. But when I hover over the green, it stays green.

How can I have every row, on hover, show #ecf3f8?

I've tried this to no avail:

.table-hover tbody tr.odd:hover td, .table-hover tbody tr.odd:hover th {
  background-color: #ecf3f8;
}

possible duplicate of [Bootstrap table striped: how do I change the strip background colour?](http://stackoverflow.com/questions/20825211/bootstrap-table-striped-how-do-i-change-the-strip-background-colour) — benomatis, Oct 02 '14 at 16:48
Not at all. I've already changed it -- my question is much different. — asgwar12, Oct 02 '14 at 16:51

score 9 · Accepted Answer · answered Oct 02 '14 at 17:03

9

Sounds like a specificity problem. Try the following:

.table-striped.table-hover>tbody>tr:hover>td, 
.table-striped.table-hover>tbody>tr:hover>th {
  background-color: #ecf3f8;
}

answered Oct 02 '14 at 17:03

Brandon Poe

true, i missed the `table-hover` bit – benomatis Oct 02 '14 at 17:14
my solution works with or without the `table-hover` ;) – benomatis Oct 02 '14 at 17:19
@webeno I avoid `!important` when I can. The only valid use I see for them is overriding javascript injected inline styles. – Brandon Poe Oct 02 '14 at 18:47

benomatis · Answer 2 · 2014-10-02T18:58:07.563

3

Try this:

.table-striped tbody tr:hover td,
.table-striped tbody tr:hover th {
    background-color: #ecf3f8
}

edited Oct 02 '14 at 18:58

answered Oct 02 '14 at 17:12

benomatis

score 2 · Answer 3 · answered Oct 02 '14 at 16:59

2

try this:

.table-hover tbody tr:hover td {
  background: #ecf3f8 !important;
}

edit: also try this:

.table-hover > tbody > tr:hover > td {
  background: #ecf3f8 !important;
}

answered Oct 02 '14 at 16:59

scooterlord

it should if the classes you mentioned above are correct. – scooterlord Oct 02 '14 at 17:02
simple table used, no fuss, none of these have an effect, try it in bootply (I'm not the OP) ;) – benomatis Oct 02 '14 at 17:10
simple table does not have 'table-hover' class – scooterlord Oct 02 '14 at 17:10

3 Answers3