在懸停上的大綱表行

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/