我有一个带有
、标题和正文的表格。我将悬停效果放在整个表格上，但对于
，仅当鼠标悬停在行上时，当鼠标悬停在表格上时，它不会改变颜色。我需要它像其他鼠标一样一接触 table 就改变颜色。我尝试了各种方法，但似乎都不起作用。
当鼠标悬停在表格上的任何位置时，如何使
行将颜色更改为白色，就像表格的其余部分一样？ JSFiddle
HTML:
<body>
<table>
<thead>
<tr>
<td><hr /></td>
</tr>
</thead>
<thead>
<tr>
<td><a href="#">This is the Header</a></td>
</tr>
</thead>
<tbody>
<tr>
<td><a href="#">some row content</a></td>
</tr>
</tbody>
</table>
</body>
CSS:
hr{
border:1px solid;
float:left;
align:left;
width:30%;
background-color:#991f33;
color:#991f33;
}
hr:hover{
background-color:#fff;
color:#fff;
}
table {
border:0;
background-color:#dcdcdc;
text-align:left;
text-decoration:none !important;
padding:20px;
}
thead tr a{
color: #911f33;
}
tbody tr{
font-size:10px;
line-height:19px;
color: #911f33;
}
table:hover, table:hover a{
color:#fff;
background-color:#911f33;
}
tr a{
color:#000;
}
最佳答案
<td><hr id="hrr"/></td>
CSS 是
table:hover #hrr
{
border:1px solid blue;
}
关于html - 将鼠标悬停在表中 <hr> 上的效果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21855134/