我有一个表格,我希望在它悬停时突出显示整行,并且整行可以作为链接点击。现在,当你在文本区域内时,它只会作为可点击链接而悬停。它正确地悬停整个宽度,但是一旦经过文本区域,它就无法在顶部和底部工作。有关此示例,请参阅我的网页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>
答案 0 :(得分:0)
更新你的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>