当子元素悬停时，我如何选择父元素？

Question

如果将子元素悬停在上面，我将如何选择父元素。

例如：

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

当使用id或class标签悬停td1时，有没有办法选择tb1？

Answer 1

不幸的是，当使用CSS悬停子元素时，无法选择父元素。这将违反级联样式表中的级联。但是，您可以使用JavaScript或其中一个库（如jQuery）轻松完成此任务。

如果您使用jQuery，以下内容将提供您正在寻找的结果：

http://jsfiddle.net/fSqSx/

Answer 2

表格和TD的ID总是这样命名吗？假设将鼠标悬停在TD上会产生一个具有您可以执行的功能的事件

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