Question

我正在尝试突出显示悬停时表格行的边框。不幸的是，这仅适用于第一行单元格。较低的行有一个不会改变颜色的边框。我尝试过使用outline，但它与webkit中的:hover不一致。

想象一下你的标准表格html。有些是td的。将鼠标悬停在一行上应突出显示为红色的边框。

table { border-collapse: collapse; } /*I am aware of separate */
table td { border: 3px solid black; }
table tr:hover td { border-top-color: red; border-bottom-color: red; }
table tr:hover td:first-child { border-left-color: red; }
table tr:hover td:last-child  { border-right-color: red; }

我对替代方法持开放态度，但我坚持使用表结构。除了标准<table> <tr> <td>

之外，不要插入额外的HTML

Answer 1

我一直面临同样的问题，最后找到了一个更简单的解决方案here。

您可以使用适用于1px边框的CSS技巧（border-style: double;）：

#mytable tr.row:hover td
{
    border-style: double;
    border-color: red;
}

无论如何，这将使您border-color工作（成为最顶层的人）。： - ）

Answer 2

对于1px边框，请参阅使用border-style: double的Leniel解决方案。这更简单。双边框是为边框的内边缘和外边缘显示1px线的边框。这对于1px边框没有任何作用，但是在＆gt; 1px时存在间隙。

对于边框＆gt; 1px，您移除<td>的所有border-bottom: 0的底部边框。除了最后一行之外，其他单元格的顶部边框将保持一切看起来应该如此。我们使用tr:last-child td { border-bottom: your border style }修复的最后一行。最后在您的悬停假类中设置底部边框。

http://jsfiddle.net/S9pkM/16/

table { border-collapse: collapse; } /*I am aware of separate */
table td { border: 1px solid black; width: 50px; height: 25px; padding: 5px; border-bottom: 0; }
table tr:last-child td { border-bottom: 1px solid black; }
table tr:hover td { border-top-color: red; border-bottom: 1px solid red; }
table tr:hover td:first-child { border-left-color: red; }
table tr:hover td:last-child  { border-right-color: red; }

Answer 3

为什么不使用单独的边框？ http://jsfiddle.net/S9pkM/6/

Answer 4

只需将此代码放入您的头部：

<style>
  table td { border: 2px solid transparent; width: 50px; height: 50px; padding: 5px 5px 5px 5px;}
  table td:hover {border:2px solid red; }
</style>

在悬停上的大纲表行

4 个答案: