悬停时突出显示表格行

Question

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

请参考链接：http://jsfiddle.net/S9pkM/2/ 想象一下您的标准表格HTML。一些和一些。当鼠标悬停在一行上时，应将其边框突出显示为红色。

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元素。

- mrtsherman

---

我认为这不是因为:hover。而是表格的行为方式。 - maxisam

Answer 1

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

你可以使用这个CSS技巧（border-style: double;），它适用于1像素边框：

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

这将使您的border-color起作用（始终是最上面的）。 :-)

- Leniel Maccaferri

---

很好，这简单多了。我没有看到双线和实线之间的视觉区别。http://jsfiddle.net/emeGe/ - mrtsherman

哎呀！这是因为double做了某种新的堆栈顺序上下文创建吗？还是有更加阴险的原因？ - Jacob Ford

有关虚线边框样式的建议吗？ - Halt

这个方案基本上运行良好，但是FF和Chrome似乎存在渲染错误，有时在悬停结束后仍会在某些边框上保留边框框颜色。这种情况大多发生在表格的最后一行和最后一列。从未成功解决渲染错误。 - SimonAlfie

我不得不将选择器更改为 #mytable tr:hover td 才能使其正常工作，否则非常好！ - Wubbler

Answer 2

对于1像素的边框，请参考Leniel的解决方案，使用border-style: double。这样更简单。双重边框是指在边框的内侧和外侧显示1像素线条的边框。对于1像素的边框没有任何作用，但对于> 1像素的边框会产生间隙。

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

- mrtsherman

Answer 3

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

- korywka

---

因为我正在使用1像素的边框。这就是为什么我说“我知道分离”的原因。我也不喜欢不同颜色的边框堆叠在一起的外观。 - mrtsherman

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>

- ravi

---

这不起作用。注意在悬停时缺少边框。http://jsfiddle.net/S9pkM/90/ - mrtsherman