仅悬停在特定单元格上的阴影表行

Question

在悬停时遮蔽行通常很容易：

tr:hover {
  background-color: $light-grey;
}

但我想仅当它是悬停的最后一个单元格时才隐藏整行。对于任何其他单元格，我不希望它被遮蔽。让我们假设：

<tr>
  <td></td>
  <td></td>
  <td class="w"></td>
<tr>

我希望 tr 仅在 w 列（一行中的第一个单元格）悬停时才被遮蔽（背景颜色更改）。可以用js来完成：

$(".w").on("hover",(e) => {
   $(e.target).parent().addClass("highlight");
});


.highlight {
    background-color: $light-grey;
}

但这只能通过 scss 来实现吗？

Answer 1

您可以仅使用 CSS 来获得效果，方法是向一行中的最后一个 td 添加一个伪元素（或通过问题中的 w 类）并使其在悬停时具有浅灰色背景。

tr {
  position: relative;
  font-size: 5em;
  display: block;
}

td.w:hover:before {
  position: absolute;
  left: 0;
  top: 0;
  content: '';
  background-color: lightgray;
  width: 100%;
  height: 100%;
  z-index: -1;
}

<table>
<tr>
  <td>A</td>
  <td>B</td>
  <td class="w">C</td>
<tr>
<tr>
  <td>A</td>
  <td>B</td>
  <td class="w">C</td>
<tr>
<tr>
  <td>A</td>
  <td>B</td>
  <td class="w">C</td>
<tr>
</table>