将鼠标悬停在同一行的最后一个元素上时更改'tr'的背景颜色[复制]

Question

这个问题在这里已有答案：

• Is there a CSS parent selector? 29回答

如果我使用CSS将最后一个元素悬停在同一行上，如何更改表格行的背景颜色？

注意：表格行背景颜色在悬停其他“td”时不应改变;悬停效果应仅由单个'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>

在上面的代码中，如果我将鼠标悬停在id为last-child的'td'上，那么它应该改变相应表行的背景颜色。我怎样才能实现它。

Answer 1

答案是：使用CSS是不可能的，因为你无法使用CSS在DOM中向后或向上选择。

因此，如果您仍需要解决您所述的问题，则必须在此处使用Javascript。在代码示例中，e是传递给处理函数的事件，并且引发事件的元素在e.target中可用。从那里，方法使用.closest('tr')来找到父行（.parentNode()也可以在这里工作）。

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>

请注意，您不能在文档中多次使用相同的id值，它必须是唯一的。在选择器中找到元素也不需要id。

Answer 2

为什么不这样作弊。忘记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>