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

Question

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

我使用 JavaScript 添加鼠标悬停事件。

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

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

例如：

Answer 1

叠加

我们可以使用:before伪元素创建叠加层— 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使得覆盖DIV已经position: absolute将相对于它的父TD定位

工作示例

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

* {
  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;
}