当鼠标悬停在子元素上时，我该如何选择其父元素？

Question

当鼠标悬停在子元素上时，如何选择父元素。

例如：

<table id="tb1">
<tr>
<td id="td1">make table red</td>
<td id="td2">make table yellow</td>
</tr>
</table>

当鼠标悬停在td1上时，是否有一种方法可以使用id或class标签选择tb1？

- Middletone

---

不行，你只能选择后代元素，而不能选择它们的任何祖先。 - BoltClock

https://dev59.com/f3VD5IYBdhLWcg3wO5AD - Jason LeBrun

只是顺便提一下：您没有id或class标签，它们是标签的属性。 - DigiKev

Answer 1

很遗憾，仅使用CSS无法在子元素悬停时选择父元素。这将违反层叠样式表中的级联。但是，您可以使用JavaScript或其中一个库（如jQuery）轻松实现此目标。

如果您要使用jQuery，则以下内容将提供您所需的结果：

http://jsfiddle.net/fSqSx/

- DigiKev

---

最终我使用了jquery和css的组合来完成这个任务。每个单元格都有与其所在列相关联的类名。我使用CSS进行行级别的更改，并使用jquery动态地重命名列单元格的类名。结果是，当你悬停在列上时，单元格会改变它的类名，从而改变它的颜色。它非常有效。只需在光标离开单元格时将其改回来，它就能正常工作。 - Middletone

Answer 2

表格和 TD 的 ID 总是这样命名的吗？假设悬停在 TD 上会生成一个带有函数的事件，你可以这样做

function highlightTable(){
  var tableID=this.id.replace('td','tb');
  document.getElementById(tableID).style.backgroundColor='#c0c0c0';
}

- derekcohen

---

你应该总是将样式、行为和标记抽象化。使用JavaScript添加内联样式不好。 - DigiKev