Question

也许有点像this question，但是接受的示例似乎不起作用。我想在此处显示鼠标悬停在该行上的“操作”按钮。因此，当我将鼠标悬停在特定的表行上时，只应显示该行的操作按钮，而其他所有按钮则应隐藏。

那么我该如何实现呢？ jQuery是必需的还是可以通过Pure CSS实现？

<table class="table">
  <thead>
    <tr>
      <th>Instance Id</th>
      <th width="150px">Action</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>123456</td>
      <td>
        <a href="#" class="">Start</a>
      </td>
    </tr>
    <tr>
      <td>123456</td>
      <td>
        <a href="#" class="action">Start</a>
      </td>
    </tr>
  </tbody>
</table>

Answer 1

这非常简单，可以使用CSS完成。

您希望在<tr>元素（即tr:hover）上悬停以更改后代（即.action）的显示属性。因此，要使用的选择器将为tr:hover .action。

这是有效的代码段：

.action {
  display: none;
}

tr:hover .action {
  display: inline;
}

<table class="table">
  <thead>
    <tr>
      <th>Instance Id</th>
      <th width="150px">Action</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>123456</td>
      <td>
        <a href="#" class="action">Start</a>
      </td>
    </tr>
    <tr>
      <td>123456</td>
      <td>
        <a href="#" class="action">Start</a>
      </td>
    </tr>
  </tbody>
</table>

您可以在此处了解有关后代选择器的更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_selectors

Answer 2

找到了解决方案Pure CSS：

.table tbody tr td a{
    display: none;
}

.table tbody tr:hover > td a{
    display: block;
}

如何在悬停表格行上显示各个表格单元格的内容？

2 个答案: