悬停时轮廓表行 [英] Outline table row on hover

问题描述

我试图突出显示悬停时表格行的边框。不幸的是，这只适用于第一行单元格。下排有一个不改变颜色的边框。我尝试使用 outline ，但它不能在webkit中的：hover 中播放。

I am trying to highlight the border of a table row on hover. Unfortunately this only works for the first row of cells. Lower rows have one border that does not change color. I have tried using outline but it doesn't play nice with :hover in webkit.

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

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

Imagine your standard table html. Some tr's with some td's. Hovering over a row should highlight its border in red.

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>

推荐答案

我遇到了同样的问题， 此处。

I've been facing this same problem and finally found a simpler solution here.

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

You can use this CSS trick ( border-style: double; ) that works for 1px borders:

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

这将使 border-color 工作（最高的一个）无论什么。 ： - ）

This will make your border-color work (be the top most one) no matter what. :-)

这篇关于悬停时轮廓表行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！