Change thead when tbody hover

Question

I am trying to make a table that when mouse hover on the row the first thead row column will change background. I know it can be done using jQuery, I just want to know if I can use CSS only.

Visit http://jsfiddle.net/G9G65/1/

<table>
<thead><tr><th></th><th>Title 1</th><th>Title 2</th></tr></thead>
<tbody>
    <tr><th>List 1</th><td>Data 1</td><td>Data 2</td></tr>
    <tr><th>List 2</th><td>Data 1</td><td>Data 2</td></tr>
    <tr><th>List 3</th><td>Data 1</td><td>Data 2</td></tr>
</tbody>
</table>

<style>
table tbody tr:hover {background: yellow;}
table tbody tr:hover thead tr th {background: red;}
</style>

possible duplicate of [Is there a CSS parent selector?](http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) — Paulie_D, Aug 05 '14 at 17:18
[Example 2](http://jsfiddle.net/G9G65/8/) Here is another possible stupid way. haha. — Li Kia Chiu, Aug 05 '14 at 19:21

score 1 · Accepted Answer · edited May 23 '17 at 12:29

Unfortunately I don't think you can achieve what you're after with css alone.

Basically you would need a parent's sibling selector to make this work, and no such selector exists.

While you can hover over a parent element and effect a child element, CSS doesn't yet allow interactions with child elements to effect parent elements or a parent element's sibling.

So...

#parent:hover #child { /* this works */
    background: green;
}
#child:hover #parent { /* this does not work */
    background: yellow;
}

Example

Change thead when tbody hover

1 Answers1