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

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>根据elements允许的内容，位于内部<tr>但不在内部的元素是无效的。我已删除它们，但如果需要，您可以将它们包装在元素中。<td><tr><td>

2. 我冒昧地将.button图像放入其<a>元素中，尽管我不确定这是否是您的意图。

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

tr:hover .button { ... }

table {
  border-collapse: collapse;
}

td {
  padding: 5px;
}

.button {
  opacity: 0;
}

tr:hover .button {
  opacity: 1;
}