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

Question

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

那么我怎样才能实现这一目标呢？是否需要 jQuery 或者可以通过纯 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