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?

Carol Skelly · Accepted Answer · 2013-11-13 21:13:35Z

10

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

answered Nov 13, 2013 at 21:13

Carol Skelly

364k92 gold badges741 silver badges651 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Chemist Over a year ago

Just found an answer here stackoverflow.com/questions/10763166/… . Was gonna delete the question but it's too late! Anyway thanks for the help.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related