悬停时大纲表格行

Question

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

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

想象一下您的标准表格 html。一些 tr 和一些 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 边框，请参阅 Leniel 使用 border-style: double 的解决方案。这要简单得多。双边框是在边框的内边缘和外边缘显示 1 像素的线。这对 1px 边框没有任何作用，但在 >1px 上存在间隙。

对于 >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>