Shadow table row on hover on specific cell only

Question

Shadowing the row when hovered is generally easy:

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

But I would like to shadow the whole row only if it is the last cell that is hovered. For any other cell I do not want it to be shadowed. Let's assume:

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

I would like the tr to be shadowed (background-color changed) only when column w (first cell in a row) is hovered. It can be done with js:

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


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

But can that be achieved with scss only?

This should answer the question: https://stackoverflow.com/a/8114664/14104186. In short, it can only be done in JavaScript — The Otterlord, Dec 10 '20 at 10:12
Does this answer your question? [CSS Changing background colour of specific cell in table when hovering over it](https://stackoverflow.com/questions/44147206/css-changing-background-colour-of-specific-cell-in-table-when-hovering-over-it) — HamiD, Dec 10 '20 at 10:19

score 0 · Accepted Answer · answered Dec 10 '20 at 11:44

You can get the effect using only CSS by adding a pseudo element to the last td in a row (or via class w as you have in the question) and getting it to have a lightgray background when hovered.

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>

Shadow table row on hover on specific cell only

1 Answers1