如何在懸停時突出顯示整個表格單元格？

Question

我有一個小問題，在我的桌子上我可以點擊整個TD，甚至設法使td：hover正常工作。

但是，我遇到了一個需要說“未完成”的塊的問題（因為我不知道如何隱藏單元格而不弄亂塊的大小）。 如何在整個單元格突出顯示但未突出顯示不完整的地方修復它？

 td a:hover { background: #c2ceb5; display: block; width: 100%; height: 100%; } td a { display: block; width: 100%; height: 100%; } td { position: relative; } td a:before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } 

 <table align="" style="border: 0px solid #ffffff; background-color: #5e913f;" class="mceEditable" border="1" cellpadding="5" cellspacing="0" height="207.75" width="1060"> <tbody> <tr> <td style="text-align: center; border: 5px solid #ffffff; width: 250px;"> <a class="" title="Super" href="http://handlingmod.jimdo.com/vehicle-list/super/adder/"><span style="color: #ffffff;">Adder</span></a> </td> <td style="text-align: center; border: 5px solid #ffffff; width: 250px;"> <a class="" title="Super" href="http://handlingmod.jimdo.com/vehicle-list/super/vacca/"><span style="color: #ffffff;">Vacca</span></a> </td> <td style="text-align: center; border: 5px solid #ffffff; width: 250px;"> <span style="color: #dddddd;">Uncomplete</span> </td> <td style="text-align: center; border: 5px solid #ffffff; width: 250px;"> <span style="color: #dddddd;">Uncomplete</span> </td> </tr> <tr> <td style="text-align: center; border: 5px solid #ffffff; width: 250px;"> <span style="color: #dddddd;">Uncomplete</span> </td> <td style="text-align: center; border: 5px solid #ffffff; width: 250px;"> <span style="color: #dddddd;">Uncomplete</span> </td> <td style="text-align: center; border: 5px solid #ffffff; width: 250px;"> <span style="color: #dddddd;">Uncomplete</span> </td> <td style="text-align: center; border: 5px solid #ffffff; width: 250px;"> <span style="color: #dddddd;">Uncomplete</span> </td> </tr> <tr> <td style="text-align: center; border: 5px solid #ffffff; width: 250px;"> <span style="color: #dddddd;">Uncomplete</span> </td> <td style="text-align: center; border: 5px solid #ffffff; width: 250px;"> <span style="color: #dddddd;">Uncomplete</span> </td> <td style="text-align: center; border: 5px solid #ffffff; width: 0px;"> <span style="color: #dddddd;">Uncomplete</span> </td> <td style="text-align: center; border: 5px solid #ffffff; width: 0px;"> <span style="color: #dddddd;">Uncomplete</span> </td> </tr> </tbody> </table> <p> <span style="color: #ffffff;">&#160;</span> </p> 

Answer 1

看看是否可行-http://jsfiddle.net/2pfL7toz/

td {
    position: relative;
    line-height: 60px; /*a bit hacky but works*/
}
td a, td span {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    text-decoration: none;
}
td a:hover {
    background: #c2ceb5;
}

Answer 2

這樣呢？

CSS：

td a:hover {
    background: #c2ceb5;
    display: block;
}
td a, td span {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    display: block;
    padding-top:20px;
}
td {
    position: relative;
}

注意：如果您的文本在單元格中換行，則此解決方案的性能會稍有下降。