边框悬停在表<tr>上的问题

Question

我很难弄清楚我做错了什么。。。我正在尝试做一些简单的事情——当用户悬停在整行上时，更改整行的边框颜色。

对于该表，我使用以下CSS代码：

.sch{ border-collapse: collapse; width:97%; margin: 0 auto; margin-top:30px; }
.sch tr{ border: 2px solid #000000; }
.sch tr:hover{ border-color: red; }

<table class='sch'>
<tr><td>Test</td><td>Test</td></tr>
<tr><td>Test</td><td>Test</td></tr>
<tr><td>Test</td><td>Test</td></tr>
</table>

问题是，当你将鼠标悬停在第二行或第三行时，边框的顶部栏保持黑色，而两侧和底部则变为红色。

我怀疑这与前一行的底部以某种方式掩盖了悬停的红色有关，但我已经尝试了所有的方法——除了正确的答案——来修复它

谢谢你的帮助！

Answer 1

border-collapse: collapse;是罪魁祸首。

这与顶部单元格底部边界位于底部单元格顶部边界的顶部这一事实有关。如果您将顶部单元格底部边界设置为无，则您将看到所有边界都正确设置为红色。

看看MDN中的这个交互式示例，可以确切地了解发生了什么https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse

Answer 2

这在没有JavaScript的情况下实现起来似乎很棘手。这是一个使用jQuery:的解决方案

$(".sch tr").hover(function(){
$(this).css("border-color", "red");
$(this).prev().css("border-bottom-width", "0");
}, function(){
$(this).css("border-color", "#000000");
$(this).prev().css("border-bottom-width", "2px");
});

.sch{ border-collapse: collapse; width:97%; margin: 0 auto; margin-top:30px; }
.sch tr{ border: 2px solid #000000; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class='sch'>
<tr><td>Test</td><td>Test</td></tr>
<tr><td>Test</td><td>Test</td></tr>
<tr><td>Test</td><td>Test</td></tr>
</table>

Answer 3

如果你只想使用CSS和HTML，你可以使用这样的解决方案，这不是最好的，但可以工作。

CSS文件：

.sch {
width:97%;
margin: 0 auto;
margin-top:30px;
border-collapse: collapse;
}
tr {
border: 2px solid #000000;
}
.sch tr:hover {
border-color: red;
border-bottom-width: 2px;
}
tr:nth-child(3) {
border-bottom-width: 0;
}
tr:nth-last-child(1) {
border-bottom-width: 2px;
}

HTML文件：

<table class='sch'>
<tr>
<td>Test</td><td>Test</td>
</tr>
<tr>
<td>Test</td><td>Test</td>
</tr>
<tr>
<td>Test</td><td>Test</td>
</tr>
</table>