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>

桌子上的边框悬停问题

3 个答案: