How would I go about selecting a parent element when a child element is hovered over?

How would I go about selecting a parent element when a child element is hovered over.

For example:

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

Is there a way to select tb1 when td1 is hovered over using eith开发者_如何学Goer the id or the class tags?

Unfortunately it is not possible to select a parent element when a child element is hovered using just CSS. This would defy the cascade in cascading style sheets. You could however accomplish this using JavaScript or one of the libraries such as jQuery easily enough.

If you were to use jQuery the following would provide the result that you are looking for:

http://jsfiddle.net/fSqSx/

Are the IDs of the table and the TDs always named like that? Assuming hovering over a TD generates an event with a function you could do

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