在懸停時突出顯示整個表格行

Question

我有一張表，我希望在懸停時突出顯示整行，並將整行作爲鏈接點擊。現在，只有當您處於文本區域時，它纔會作爲可點擊鏈接懸停。它正確地將整個寬度懸停，但是一旦通過文本區域，它就不會在頂部和底部工作。有關此示例，請參閱我的網頁www.twoguysplayingzelda.com/athenaveta/。

.post-content table { 
 
    border-collapse: collapse; 
 
    border-spacing: 0; 
 
    empty-cells: show; 
 
    font-size: 0.9em; 
 
    width: 100%; 
 
} 
 

 
.post-content th, 
 
.post-content td { 
 
    padding: 2%; 
 
    margin: 0; 
 
    overflow: visible; 
 
    line-height: 75%; 
 
    border-top: 2px solid #000000; 
 
    border-bottom: 2px solid #000000; 
 
} 
 

 
.post-content caption { 
 
    text-align: center; 
 
    padding: 2%; 
 
} 
 

 
.post-content thead { 
 
    vertical-align: bottom; 
 
    white-space: nowrap; 
 
} 
 

 
.post-content th { 
 
    font-weight: bold; 
 
} 
 

 
table tr td a { 
 
    display: block; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
td:hover { 
 
    background: #f0f0f5; 
 
}

<table> 
 
    <tbody> 
 
    <tr> 
 
     <td><strong><span id="writer-pages" style="font-size: 14pt; font-family: 
 
    Latin, 'Architects Daughter';"><a 
 
    href="http://twoguysplayingzelda.com/news/check-out-this-epic-rap-battle- 
 
    between-zelda-and-peach/">Check out this epic rap battle between Zelda and 
 
    Peach!</a></span></strong></td> 
 
    </tr> 
 
    <tr> 
 
     <td><strong><span id="writer-pages" style="font-size: 14pt; font-family: 
 
    Latin, 'Architects Daughter';"><a 
 
    href="http://twoguysplayingzelda.com/news/the-trouble-with-triforces/">The 
 
    Trouble with Triforces</a></span></strong></td> 
 
    </tr> 
 
    <tr> 
 
     <td><strong><span id="writer-pages" style="font-size: 14pt; font-family: 
 
    Latin, 'Architects Daughter';"><a 
 
    href="http://twoguysplayingzelda.com/news/acapella-a-tribute-to-zelda- 
 
    themes/">Acapella: A Tribute to Zelda Themes</a></span></strong></td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 1

更新你的CSS文件，如：

.post-content table { 
    border-collapse: collapse; 
    border-spacing: 0; 
    empty-cells: show; 
    font-size: 0.9em; 
    width: 100%; 
} 

.post-content th, 
.post-content td { 
    padding: 0px; 
    margin: 0; 
    overflow: visible; 
    line-height: 75%; 
    border-top: 2px solid #000000; 
    border-bottom: 2px solid #000000; 
} 

.post-content caption { 
    text-align: center; 
    padding: 2%; 
} 

.post-content thead { 
    vertical-align: bottom; 
    white-space: nowrap; 
} 

.post-content th { 
    font-weight: bold; 
} 

table tr td a { 
    display: block; 
    height: 100%; 
    width: 100%; 
    padding: 2%; 
} 

td:hover { 
    background: #f0f0f5; 
} 

例子：

.post-content table { 
 
    border-collapse: collapse; 
 
    border-spacing: 0; 
 
    empty-cells: show; 
 
    font-size: 0.9em; 
 
    width: 100%; 
 
} 
 

 
.post-content th, 
 
.post-content td { 
 
    padding: 0px; 
 
    margin: 0; 
 
    overflow: visible; 
 
    line-height: 75%; 
 
    border-top: 2px solid #000000; 
 
    border-bottom: 2px solid #000000; 
 
} 
 

 
.post-content caption { 
 
    text-align: center; 
 
    padding: 2%; 
 
} 
 

 
.post-content thead { 
 
    vertical-align: bottom; 
 
    white-space: nowrap; 
 
} 
 

 
.post-content th { 
 
    font-weight: bold; 
 
} 
 

 
table tr td a { 
 
    display: block; 
 
    height: 100%; 
 
    width: 100%; 
 
    padding: 2%; 
 
} 
 

 
td:hover { 
 
    background: #f0f0f5; 
 
}

<table> 
 
    <tbody> 
 
    <tr> 
 
     <td><strong><span id="writer-pages" style="font-size: 14pt; font-family: 
 
    Latin, 'Architects Daughter';"><a 
 
    href="http://twoguysplayingzelda.com/news/check-out-this-epic-rap-battle- 
 
    between-zelda-and-peach/">Check out this epic rap battle between Zelda and 
 
    Peach!</a></span></strong></td> 
 
    </tr> 
 
    <tr> 
 
     <td><strong><span id="writer-pages" style="font-size: 14pt; font-family: 
 
    Latin, 'Architects Daughter';"><a 
 
    href="http://twoguysplayingzelda.com/news/the-trouble-with-triforces/">The 
 
    Trouble with Triforces</a></span></strong></td> 
 
    </tr> 
 
    <tr> 
 
     <td><strong><span id="writer-pages" style="font-size: 14pt; font-family: 
 
    Latin, 'Architects Daughter';"><a 
 
    href="http://twoguysplayingzelda.com/news/acapella-a-tribute-to-zelda- 
 
    themes/">Acapella: A Tribute to Zelda Themes</a></span></strong></td> 
 
    </tr> 
 
    </tbody> 
 
</table>