在悬停上的大纲表行

Question

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

http://jsfiddle.net/S9pkM/2/

想象一下您的标准表格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

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

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

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

无论如何，这将使你的border-color工作（是最顶层的）。 :-)

Answer 2

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

对于> 1px的边框，删除所有带有border-bottom: 0所有<td>的下border-bottom: 0 。 除了最后一行之外，其他单元格的顶部边框将保持一切看起来应该如此。 我们用tr:last-child td { border-bottom: your border style }修改的最后一行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

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

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

Answer 4

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