Add highlight on clickable table row (using bootstrap) - CSS

Question

I want to highlight row on mouseover (hover). I am using bootstrap and on the table I use their class table-striped , so when I write css:

tbody {
  tr:hover {
    background-color: #ff0;
  }
}

It only changes color on rows that are white, but not the other ones. Not sure what the best way to solve this problem is. Maybe I can overwrite table-striped highlighting somehow? How would I do that?

Answer 1

Try using the 'table-hover' and override the color like this..

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

http://bootply.com/93988