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

Answer 1

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

Answer 2

Try this:

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

You can try it here: http://www.bootply.com/2Gp7XHJ9jV

Source: https://github.com/twbs/bootstrap/issues/3223#issuecomment-5735608

Answer 3

try this:

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

edit: also try this:

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