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

Posted 2023-03-06

【中文标题】悬停时突出显示整个表格行

【英文标题】：Highlight entire table row on hover

【发布时间】：2018-01-07 08:52:29

【问题描述】：

我有一个表格，当它悬停在上面时，我想突出显示整行，并且整行可以作为链接点击。现在，当您在文本区域内时，它仅作为可点击链接悬停。它正确地悬停在整个宽度上，但是一旦您经过文本区域，它将无法在顶部和底部工作。请参阅我的网页 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>

【参考方案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>

【讨论】：

如果你给出一个更简短的例子而不是编辑 OP 的整个代码并粘贴它会很好。我确信它帮助 OP 解决了他的问题，但对于任何访问它的人来说，它不会那么有用。