html - 表格 上的边框悬停问题

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