tr:hover not working
CssCss Problem Overview
I'm trying to highlight (change background color) of the entire row when the mouse is hovering on a table row. I searched through the Net and it should be working, but it doesn't. I'm displaying it on Chrome.
<table class="list1">
<tr>
<td>1</td><td>a</td>
</tr>
<tr>
<td>2</td><td>b</td>
</tr>
<tr>
<td>3</td><td>c</td>
</tr>
</table>
my css:
.list1 tr:hover{
background-color:#fefefe;
}
The correct css should be:
.list1 tr:hover td{
background-color:#fefefe;
}
//--this css for the td keeps overriding the one i showed earlier
.list1 td{
background-color:#ccc000;
}
Thanks for the feedback guys!
Css Solutions
Solution 1 - Css
Your best bet is to use
table.YourClass tr:hover td {
background-color: #FEFEFE;
}
Rows aren't fully support for background color but cells are, using the combination of :hover and the child element will yield the results you need.
Solution 2 - Css
You need to use <!DOCTYPE html> for :hover to work with anything other than the <a> tag. Try adding that to the top of your HTML.
Solution 3 - Css
try
.list1 tr:hover td{
background-color:#fefefe;
}
Solution 4 - Css
tr:hover doesn't work in old browsers.
You can use jQuery for this:
.tr-hover
{
background-color:#fefefe;
}
$('.list1 tr').hover(function()
{
$(this).addClass('tr-hover');
},function()
{
$(this).removeClass('tr-hover');
});
Solution 5 - Css
Works fine for me... The tr:hover should work. Probably it won't work because:
-
The background color you have set is very light. You don't happen to use this on a white background, do you?
-
Your
<td>tags are not closed properly.
Please note that hovering a <tr> will not work in older browsers.
Solution 6 - Css
Like @wesley says, you have not closed your first <td>. You opened it two times.
<table class="list1">
<tr>
<td>1</td><td>a</td>
</tr>
<tr>
<td>2</td><td>b</td>
</tr>
<tr>
<td>3</td><td>c</td>
</tr>
</table>
CSS:
.list1 tr:hover{
background-color:#fefefe;
}
There is no JavaScript needed, just complete your HTML code
Solution 7 - Css
You can simply use background CSS property as follows:
tr:hover{
background: #F1F1F2;
}
Solution 8 - Css
Try it:
css code:
.list1 tr:hover td {
background-color:#fefefe;
}
Solution 9 - Css
Use !important:
.list1 tr:hover{
background:#fefefe !important;
}
Solution 10 - Css
I had the same problem. I found that if I use a DOCTYPE like:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
it didn't work. But if I use:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
it did work.
Solution 11 - Css
Also try thistr:hover td {color: aqua;}
`
Solution 12 - Css
Recently I had a similar problem, the problem was I was using background-color, use background: {anyColor}
example:
tr::hover td {background: red;}
This works like charm!
Solution 13 - Css
Also, it matters in which order the tags in your CSS file are styled. Make sure that your tr:nth-child and tr:hover td are described before table's td and th. Like so:
#tblServers {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
#tblServers tr:nth-child(even){background-color: #f2f2f2;}
#tblServers tr:hover td{background-color: #c1c4c8;}
#tblServers td, #tblServers th {
border: 1px solid #ddd;
padding: 8px;
}
#tblServers th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #4a536e;
color: white;
}