CSS change multiple elements on hover

Question

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>

CSS stands for Cascading Style Sheets so you can style the HTML from top to bottom ( parent > child ) not the other way around. you can style the parent depending on it's child using JQ and so you can't style a `td` from a `row` when hovering a `td` from another `row` — Mihai T, Aug 19 '16 at 12:19
Not sure I understand this.. but, could you just remove the `tr` selector? See here: https://jsfiddle.net/NotInUse/30wv0y8m/11/ It would help a great deal if you were more descriptive "another td" isn't that clear. Can you rephrase to .. "if I hover over A.. I want B to change as well? — Scott, Aug 19 '16 at 12:25
You can not achieve this using CSS, because you do not have “whole rows”, but two completely independent tables displayed next to each other. There is _no_ connection between a row in the left and a row in the right table, that could be used in CSS to select the “corresponding” row. You will need to use JavaScript here. — CBroe, Aug 19 '16 at 12:28
@masterfan I gave you my solution here , in your first post. http://stackoverflow.com/questions/39037615/change-background-for-each-td-with-tr-parent/39041068#39041068 — Adrian Gheorghe, Aug 19 '16 at 15:53

score 1 · Answer 1 · answered Aug 19 '16 at 12:26

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>

CSS change multiple elements on hover

1 Answers1