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

Question

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?

Nope, you can only select descendant elements, not any of their ancestors. — BoltClock, Feb 06 '11 at 21:07
http://stackoverflow.com/questions/45004/complex-css-selector-for-parent-of-active-child — Jason LeBrun, Feb 06 '11 at 21:07
Just as a side note: You don’t have `id` or `class` tags, they are attributes of tags. — DigiKev, Feb 08 '11 at 21:38

score 1 · Accepted Answer · answered Feb 08 '11 at 21:31

1

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/

answered Feb 08 '11 at 21:31

DigiKev

1,071
3
11
19

I ended up using a combination of jquery and css to accomplish this. Each cell has a class name associated with it for the column. I do the row level changes with CSS and use jquery to dynamically rename the classes for the column's cells. The result is that when you hover over the column the cell changes it's class and thus it's colour. It works great. Just chang eit back when the cursor leaves the cell and it will work fine. – Middletone Feb 10 '11 at 04:38

score 0 · Answer 2 · answered Feb 06 '11 at 21:44

0

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

answered Feb 06 '11 at 21:44

derekcohen

1,514
4
17
34

You should always abstract style, behaviour and markup. It is not good to add inline styles using JavaScript. – DigiKev Feb 11 '11 at 21:18

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

2 Answers2