在悬停上的大纲表行

Question

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

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; }

我对替代方法持开放态度,但我坚持使用表结构.除标准外没有插入额外的HTML<table> <tr> <td>

Answer 1

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

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

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

这将使你的border-color工作(成为最顶层的)无论如何.:-)

Answer 2

对于1px边框，请参阅Leniel的解决方案，该方法使用border-style: double。这要简单得多。双边框是显示边框的内部和外部边缘的1px线的边框。这对于1px的边框没有任何作用，但是在> 1px的边框上有一个间隙。

如果边框大于1像素，则删除所有<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; }