html - 当您将鼠标悬停在整个表格行上时，如何使按钮出现在悬停上？

Question

我的 HTML 代码遇到问题。当您将鼠标悬停在表中的一行上时，我试图显示一个按钮。现在，该按钮仅在您将鼠标悬停在它附近时显示，但我需要它在您将鼠标悬停在该行上的任何位置时显示。谁能帮忙解释一下如何做到这一点？

.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

现在，只有当您直接将鼠标悬停在按钮上时才会显示该按钮。为了在悬停表格行时显示按钮，请将 CSS 定义设置为悬停行内的目标按钮:

tr:hover .button { ... }

另外:

1. <div> <tr> 内的元素但不是<td>无效，根据 permitted content of <tr> elements 。我已将它们删除，但您可以将它们包裹在 <td> 中元素(如果您需要的话)。

2. 我冒昧地把 .button其内的图像 <a>元素，尽管我不确定这就是您的意图。

3. 我注意到悬停效果在单元格之间的空间上不起作用，这会导致悬停区域出现间隙。所以我设置 border-collapse:collapse; 并单独填充单元格。

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>