Строка теневой таблицы при наведении только на определенную ячейку

Затенение строки при наведении обычно легко:

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?

Это должно ответить на вопрос: stackoverflow.com/a/8114664/14104186. Короче говоря, это можно сделать только в JavaScript

The Otterlord 10.12.2020 11:12
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
0
2
303
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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>

Другие вопросы по теме