突出显示悬停时的整个表格行

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>