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

此外：

<div>

<tr>

<td>元素无效。我删除了它们，但如果需要，可以将它们包装在<td>个元素中。
我冒昧地将.button张图片放在<a>元素中，虽然我不确定你的意图是什么。
< / LI>
我注意到悬停效果不会对单元格之间的空间起作用，这会导致悬停区域出现空白。所以我设置permitted content of <tr> elements并单独填充单元格。

＆＃13;

table {
  border-collapse: collapse;
}

td {
  padding: 5px;
}

.button {
  opacity: 0;
}

tr:hover .button {
  opacity: 1;
}

＆＃13;

<table>
  <tr>
    <td><img src="//lorempixel.com/20/20/abstract/1/" width="20" 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="//lorempixel.com/20/20/abstract/1/" width="20" height="20" />
        </a>
      </div>
    </td>
  </tr>
  <tr>
    <td><img src="//lorempixel.com/20/20/abstract/2/" width="20" 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="//lorempixel.com/20/20/abstract/2/" width="20" height="20" />
        </a>
      </div>
    </td>
  </tr>
</table>

＆＃13;

Answer 2

我的理解是从解释

我正在尝试显示按钮

最初是隐藏的吗？如果是这样，只需trigger将鼠标悬停在带有jQuery的按钮上。

所以，我们可以说ID添加到：<tr id="myrow">，<div class="button">我们也添加ID：<div class="button" id="mybtn">

然后在jQuery中我们有：

$("#myrow").mouseover(function() {
   $("#mybtn").show() // if it was hidden show it
   $("#mybtn").trigger("mouseover"); // trigger as if mybtn was mouseovered
});

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

2 个答案: