当我悬停在上时,我希望它的顶部和底部边框改变颜色。 我遇到的问题是,在悬停的上方的覆盖了悬停样式(至少我认为是这样)。
在我的示例中,第一个项目正确地悬停,但在第二个和第三个项目中,只有底部边框突出显示:
table {
border-collapse: collapse;
}
th {
background-color: rgb(231, 231, 231);
}
td {
border-bottom: 2px solid rgb(214, 214, 214);
border-top: 2px solid rgb(214, 214, 214);
}
table tr:hover td {
border-bottom: 2px solid red;
border-top: 2px solid red;
}
<table>
<tr>
<th>COMPANY</th>
<th>CONTACT</th>
<th>COUNTRY</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
</table>
border-collapse: collapse
有一个复杂的算法来决定显示哪个边框。详情请参阅官方文档。 - AlexPborder-spacing:0
而不是border-collapse
,看看是否更好。 - Niet the Dark Absolborder-spacing: 0
让表格看起来相当丑陋,这仍然很糟糕。 - Frank