[英]Highlight entire table row on hover
我有一張桌子,當我將鼠標懸停在那行時,我想突出顯示整行,並且該行可以作為鏈接單擊。 現在,只有當您位於文本區域內時,它才會作為可單擊的鏈接徘徊。 它會正確地徘徊在整個寬度上,但是一旦您超過文本區域,它就不會在頂部和底部起作用。 有關此示例,請參閱我的網頁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>
像這樣更新您的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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.