Question

如果使用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”上，则在上表代码中是

那么它应该更改相应表格行的背景颜色。我该如何实现？？

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>

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

2 个答案: