Javascript 将鼠标悬停在同一行的最后一个元素上时，更改“tr”的背景色

如果使用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为最后一个孩子的“td”上， 然后它应该改变相应表格行的背景颜色。

---

我怎样才能做到呢？

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

因此，如果您仍然需要解决您所说的问题，那么您必须在这里使用Javascript。在代码示例中，e是传递给handler函数的事件，而引发事件的元素在e.target中可用。从这里开始，方法使用.recest'tr'查找父行。parentNode也可以在这里工作

让lastds=[…document.querySelectorAll'td:last of type']； 对于lastTds的const lastTd{ lastTd.addEventListener'mouseenter'，e=>{ e、 最接近的'tr'。类列表。添加'highlighted'； } lastTd.addEventListener'mouseleave'，e=>{ e、 目标。最近的'tr'。类列表。删除'highlighted'； } } .突出显示{ 背景颜色：黄色； } 名字 姓氏 年龄 吉尔 史密斯 50 前夕 杰克逊 94

---

为什么不这样欺骗呢。忘记javascript吧

桌子{ 溢出：隐藏； } tr td{ 高度：20px； 位置：相对位置； } tr>td:最后一个子对象：悬停：：之后{ 内容：； 位置：绝对位置； 背景色：ffa； 左：-101vw； 排名：0； 身高：100%； 宽度：200vw； z指数：-1； } 名字 姓氏 年龄 吉尔 史密斯 50 前夕 杰克逊 94

---

您需要JavaScript来实现这一点，目前CSS没有“父选择器”。您使用Jquery吗？在一个文档中，同一个id值不能有多次，它必须是唯一的。@6@connexo兄弟，我知道，这只是一个例子；谢谢你，但是OP没有标记JavaScript，他想要的是一个CSS唯一的解决方案，这对于mow来说是不可能的。@首先OP有一个问题要解决。如果不可能使用CSS，我的答案指出了这一点，并给出了理由，在我看来，最好向OP展示他们还可以如何实现自己的目标。我知道我只想向所有阅读过的人提一提。我编辑了OP的问题，添加了JavaScript标记，所以你的答案与问题相符；谢谢，发生了什么事？我知道这段代码很有用。很抱歉重播太晚，它改变了外部div的背景颜色