CSS change multiple elements on hover [duplicate] - html

Question

This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 6 years ago.
I want the whole row to change background-color on hover. The HTML is really old and I must leave it as it is. So I need this done purely in CSS. No JavaScript nor JQuery. Once I hover on .GMDataRow td I also need to trigger (change background) on the same element in another td. The order of elements is same in both td's.
Here's the smaller skeleton of code so you understand what im talking about:
<table>
<tr>
<td>code here</td>
<td>code here</td>
</tr>
</table>
Those two tds have identical children elements and the most important, they have same <tr class="GMDataRow">. So I was thinking maybe it can be done with :nth-child(). I need your suggestions
JSFiddle:
And here's the real skeleton:
<table class="GMMainTable" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<div class="GMBodyLeft">
<table>
<tr class="GMDataRow" >
<td>
xxx
</td>
</tr>
<tr class="GMDataRow">
<td>
xxx
</td>
</tr>
</table>
</div>
</td>
<td>
<div class="GMBodyMid">
<table>
<tr class="GMDataRow">
<td>
yyy
</td>
<td>
yyy
</td>
</tr>
<tr class="GMDataRow">
<td>
yyy
</td>
<td>
yyy
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>

Answer 1

try this :
.hoverTable{
width:100%;
border-collapse:collapse;
}
.hoverTable td{
padding:7px; border:#4e95f4 1px solid;
}
.hoverTable tr{
background: #b8d1f3;
}
.hoverTable tr:hover {
background-color: #ffff99;
}
<table class="hoverTable">
<tr>
<td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>
</tr>
<tr>
<td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>
</tr>
<tr>
<td>Text 3A</td><td>Text 3B</td><td>Text 3C</td>
</tr>
</table>