Change the background colour of a 'tr' while hovering on the last element in the same row

Question

How can I change the background colour of a table row if I hover the last element on the same row using CSS?

Note: table row background colour should not change while hovering the other 'td'; Hovering effect should be applied only by a single 'td'.

<table style="width:100%">
<tr>
 <th>Firstname</th>
 <th>Lastname</th> 
 <th>Age</th>
</tr>
<tr>
  <td>Jill</td>
  <td>Smith</td> 
  <td id="last-child">50</td>
 </tr>
<tr>
  <td>Eve</td>
  <td>Jackson</td> 
  <td id="last-child">94</td>
</tr>
</table>

in the above table code if I hover over the 'td' having an id of last-child, then it should change the background colour of the corresponding table row. How can I achieve it.?

You'll need `JavaScript` to achieve this, currently, `CSS` doesn't have a 'parent selector'. — ths, Sep 12 '18 at 10:28
You cannot have the same `id` value more than once in a document, it has to be unique. — connexo, Sep 12 '18 at 10:33
@connexo brother, i know it, it is just for an example;Thank you — pepe, Sep 12 '18 at 10:37
@pepe Always a bad idea to be careless about errors in sample code you present. — connexo, Sep 12 '18 at 10:39
Check out my answer. All this stuff is too complex for what you're trying to do. — Sparky, Sep 12 '18 at 10:57

score 1 · Answer 1 · answered Sep 12 '18 at 10:55

1

Why not cheat like this. Forget the javascript.

table{
overflow:hidden;
}
tr td{
height:20px;
position:relative;
}
tr > td:last-child:hover::after{
  content: "";
  position:absolute;
  background-color: #ffa;
  left: -101vw;
  top: 0;
  height: 100%;
  width: 200vw;
  z-index: -1;
}

<table style="width:100%" border="1">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

answered Sep 12 '18 at 10:55

Sparky

254
1
11

did n't work out; Thanks – pepe Sep 12 '18 at 14:11
So what happened instead? I know the snippet works. – Sparky Sep 12 '18 at 14:18
sorry for the late replay, it changes the background colour of outer div – pepe Sep 13 '18 at 10:29

connexo · Answer 2 · 2018-09-12T10:40:53.803

Answer is: Using CSS you cannot, since you cannot select backwards or upwards in the DOM with CSS.

So if you still need to solve the problem you stated, you will have to resort to Javascript here. In the code example, e is the event being passed to the handler function, and the element that the event was raised on is available in e.target. From there the methods use .closest('tr') to find the parent row (.parentNode() would also work here).

let lastTds = [...document.querySelectorAll('td:last-of-type')];

for (const lastTd of lastTds) {
  lastTd.addEventListener('mouseenter', (e) => {
    e.target.closest('tr').classList.add('highlighted');
  })
  lastTd.addEventListener('mouseleave', (e) => {
    e.target.closest('tr').classList.remove('highlighted');
  })
}

.highlighted {
  background-color: yellow;
}

<table style="width:100%" border="1">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

Please note that you cannot have the same id value more than once in a document, it has to be unique. The ids are also not necessary to find the elements in a selector.

Works, but the OP didn't tag `JavaScript` he wants a `CSS` only solution which is impossible for mow. — ths, Sep 12 '18 at 10:36
@ths Well in the first place OP has a problem to solve. If it isn't possible using CSS (which my answer points out and gives reason for), imo it's better to show OP how else they could achieve their goal. — connexo, Sep 12 '18 at 10:38
I know I just want to mention for anyone who reads. I edited the OP's question added the `JavaScript` tag, so your answer fits with the question. — ths, Sep 12 '18 at 10:40

Change the background colour of a 'tr' while hovering on the last element in the same row

2 Answers2