CODEWITHSUNDEEP
csscss-selectors
Middletone
Middletone

Reputation: 4270

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 either the id or the class tags?

Upvotes: 3

Views: 164

Answers (2)

DigiKev
DigiKev

Reputation: 1071

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/

Upvotes: 1

derekcohen
derekcohen

Reputation: 1514

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';
}

Upvotes: 0

Related Questions