I recently created a table with an interesting structure where the first <tr> contains two <td> elements (the first one having a rowspan), while the second <tr> only has one <td>. My goal is to have hovering over the <td> in the second row affect both itself and the first <td> in the first row.
For reference, this is similar to what I'm trying to achieve: http://jsfiddle.net/M3Wya/
The code for the table structure looks like this:
<table class="class">
<tr><td rowspan="2">A</td><td>B</td></tr>
<tr><td>C</td></tr>
</table>
In essence, when I hover over B, I want both A and B to change (I've tried using .class tr:hover{} for this). Similarly, if I hover over C, I would like A and C to experience the same effect.
I'm curious if achieving this behavior is possible solely through CSS? I've been exploring the sibling selector but haven't been able to figure out how to apply it here.
If achieving this effect isn't feasible using CSS alone, could someone provide guidance on how to implement it using JavaScript?
If interested, you can view the solution I found here: http://codepen.io/anon/pen/cGhwL