How to display content of respective table cell on hover table row?

Question

Maybe somewhat like this question, but example in accepted seems not working. I want to show here, Action button, on hovering the row. So when I hover to particular table row, so only that row's action button should be displayed and all others should be hidden.

So how can I achieve this? Is jQuery required or is it possible through 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

It is pretty straight-forward and can be done with CSS.

You want a hover on the <tr> element (i.e. tr:hover) to change the display property of a descendant (i.e. .action). So the selector to use would be tr:hover .action.

Here's the working snippet:

.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>

You can read more about the descendant selectors here: https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_selectors