Затенение строки при наведении обычно легко:
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?
Отвечает ли это на ваш вопрос? CSS Изменение цвета фона конкретной ячейки в таблице при наведении на нее курсора
Вы можете получить эффект, используя только 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>
Это должно ответить на вопрос: stackoverflow.com/a/8114664/14104186. Короче говоря, это можно сделать только в JavaScript