将鼠标悬停在HTML表格行上时显示透明框（不突出显示行）

Question

我想在用户鼠标悬停的表格行周围显示一个透明框（上面有一些按钮）。我在谷歌上搜索过，但所有页面都讲述了鼠标悬停时如何突出显示行。

我使用JavaScript在事件上添加鼠标。

$('tr').on('mouseover', displayBox);

你能帮我解决这个问题还是给我一些参考文章？

例如：

Answer 1

叠加

我们可以使用:before pseudo element - tbody tr td:first-child:before：

创建叠加层

• 它的宽度为100％，并且会拉伸该行的宽度。

• 它的高度与td相同，并且会拉伸行的高度

• 表格为position: relative，以便单元格:before子项相对于表格定位，并且可以在整个行中展开。

按钮div

按钮可以在每行的最后一个单元格的div中提供 - 不需要javascript。这需要稍微调整一下，因为它们在Firefox中略微过低。

• 每行最后一个单元格中的div都隐藏opacity，直到该行悬停。悬停时显示：

  tr:hover td > div {
      opacity: 1;
  }
  

• td:last-child设为position: relative，以便具有position: absolute的叠加div相对于其父td定位

工作示例

＆＃13;

＆＃13;

* {
  box-sizing: border-box;
}
table,
tr td:last-child {
  position: relative;
}
th,
td {
  padding: 0 10px;
  height: 2em;
}
td > div {
  position: absolute;
  opacity: 0;
  transition: opacity 0.5s;
  right: 0;
  top: 0.5em;
  /* 1/4 height of td*/
  height: 2em;
  /*height of td*/
}
tr:hover td > div {
  opacity: 1;
}
tbody tr td:first-child:before {
  width: 100%;
  content: '';
  display: block;
  height: 2em;
  position: absolute;
  background: rgba(0, 0, 0, 0);
  margin-top: -6px;
  /* off set space above text */
  left: 0;
  transition: background 0.5s;
}
tbody tr:hover td:first-child:before {
  background: rgba(0, 0, 0, 0.6);
}
td > div > a {
  margin: 0 0.25em 0 0;
  background: #1DE9B6;
  color: #FFF;
  text-decoration: none;
  border-radius: 2px;
  padding: 3px;
  transition: color 0.5s, background 0.5s;
}
/*Not important -- example only*/

td > div > a:hover {
  background: #A7FFEB;
  color: #000;
}
table {
  border-collapse: collapse;
  border: solid 1px #EEE;
}
th,
td {
  border: solid 1px #EEE;
  transition: background 0.5s;
}
tr:nth-child(even) {
  background: #E3F2FD;
}

＆＃13;

<table>
  <thead>
    <tr>
      <th>Heading</th>
      <th>Heading</th>
      <th>Heading</th>
      <th>Heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
      <td>Content
        <div><a href="#">Action</a><a href="#">Action</a><a href="#">Action</a></div>
      </td>
    </tr>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
      <td>Content
        <div><a href="#">Action</a><a href="#">Action</a><a href="#">Action</a></div>
      </td>
    </tr>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
      <td>Content
        <div><a href="#">Action</a><a href="#">Action</a><a href="#">Action</a></div>
      </td>
    </tr>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
      <td>Content
        <div><a href="#">Action</a><a href="#">Action</a><a href="#">Action</a></div>
      </td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="4">Footer</td>
    </tr>
  </tfoot>
</table>

＆＃13;

＆＃13;

＆＃13;