将光标悬停在特定单元格上时，阴影表行

Question

悬停时遮挡行通常很容易：

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

但只有当它是最后一个悬停的单元格时，我才想对整行进行阴影处理。对于任何其他单元格，我都不希望它被遮蔽。假设：

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

我希望只有当列w(行中的第一个单元格(悬停时，tr才会被阴影化(背景颜色更改(。可以使用js:

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

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

但这只能通过scs实现吗？

Answer 1

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

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>