Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I change the hover over color for a hover over table in Bootstrap?

I have a table with class 'table-hover'. The default hover over color is a white / light grey. How do I change this color?

I've tried overwriting the default by adding the following to my dominant style sheet

.table-hover tbody tr:hover > th {
  background-color: #D1D119;
}

Unfortunately, the above does not work

like image 696
Lloyd Banks Avatar asked Oct 14 '22 21:10

Lloyd Banks


People also ask

What background color gets added when we use table-hover?

. table-hover tbody tr:hover td { background-color: Blue; }

How do you set a hover in a table?

You can use CSS without any javascript to make the row of a table highlight on hover. All it requires is that the use the pseudo class :hover to add the effect to whatever html element you choose.

What is table-hover in Bootstrap?

BootstrapWeb DevelopmentCSS Framework. Using the . table-hover class, a light gray background will be added to rows while the cursor hovers over them.


2 Answers

Give this a try:

.table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
  background-color: #color;
}
like image 267
pvskisteak5 Avatar answered Oct 17 '22 10:10

pvskisteak5


This was the most simple way to do it imo and it worked for me.

.table-hover tbody tr:hover td {
    background: aqua;
}

Not sure why you would want to change the heading color to the same hover color as the rows but if you do then you can use the above solutions. If you just want t

like image 22
frankie4fingers Avatar answered Oct 17 '22 10:10

frankie4fingers