How to make button appear on hover when you hover over a whole table row?

Question

I'm running into a problem in my HTML code. I am trying to display a button when you hover over a row in a table. Right now the button only displays when you hover near it but I need it to show when you hover over anywhere on that row. Can anyone help explain how to do this?

.button {
  opacity: 0;
}

.button:hover {
  display: inline-block;
  opacity: 1;
}

<table>
  <tr>
    <div class="button">
      <a href="#"></a>
    </div>
    <td><img src="/app/images/todo/todos_incomplete_blue.svg" /></td>
    <td>Make a To Do List</td>
    <td>Me Myself and I</td>
    <td>Whenever I want</td>
    <td>69%</td>
    <td>
      <div class="button">
        <img src="/app/images/master/actions_btn.svg" />
        <a href="#"></a>
      </div>
    </td>
  </tr>
</table>

Answer 1

Right now, a button will only show when you hover over it directly. In order to show a button when its table row is hovered, set your CSS definition to target buttons that are inside of hovered rows:

tr:hover .button { ... }

Also:

1. <div> elements that are inside <tr> but not <td> are invalid, per the permitted content of <tr> elements. I have removed them, but you could wrap them in <td> elements if you need them.

2. I took the liberty of putting the .button images inside their <a> elements, although I'm not sure that's what you intended.

3. I noticed that the hover effect doesn't work over spaces between cells, which causes gaps in the hover area. So I set border-collapse:collapse; and padding the cells individually.

table {
  border-collapse: collapse;
}

td {
  padding: 5px;
}

.button {
  opacity: 0;
}

tr:hover .button {
  opacity: 1;
}

<table>
  <tr>
    <td><img src="https://via.placeholder.com/30x20/" width="30" height="20" /></td>
    <td>Make a To Do List</td>
    <td>Me Myself and I</td>
    <td>Whenever I want</td>
    <td>69%</td>
    <td>
      <div class="button">
        <a href="#">
          <img src="https://via.placeholder.com/30x20/" width="30" height="20" />
        </a>
      </div>
    </td>
  </tr>
  <tr>
    <td><img src="https://via.placeholder.com/30x20/" width="30" height="20" /></td>
    <td>Make a To Do List</td>
    <td>Me Myself and I</td>
    <td>Whenever I want</td>
    <td>69%</td>
    <td>
      <div class="button">
        <a href="#">
          <img src="https://via.placeholder.com/30x20/" width="30" height="20" />
        </a>
      </div>
    </td>
  </tr>
</table>