Change background color on both of two ids when either is hovered?

Question

I want a hover over either of two divs to effect a background color change in both divs.

I wrote a two-column table in which to show two different versions of the same text so that people could easily see differences from one version of the text to the other. I included a hover feature so the reader could be sure they were looking at the same place in column A as in col. B. But at some places the texts vary enough that a line-by-line comparison doesn't answer to the reader's needs. So I changed the table to a series of divs. But I don't know how to encode the CSS so that hovering over, for example, the div for line 500 in col. B effects a change in background color of both col. B, line 500 and col. A, line 492, OR hovering over col. A, line 492 effects the background color, in the same way, of both col. A, line 492 and col. B, line 500. Hope this makes sense.

 table.table1 {border-collapse: collapse; border: 1px solid black; background-color: #FFF;} tr.table1:hover {background-color: #CCC;} 

 <div class="container"> <table class="table1"> <tr class="table1"><td><h3>First Verson</h3></td><td></td><td><h3>Second Version</h3></td></tr> <tr class="table1"><td>1: Here's the first line</td><td><&nbsp;</td> <td>1: Here's the other first line</td></tr> <tr classs="table1"><td>2: Here's the second line</td><td>&nbsp;</td><td>2: Here's the other second line</td></tr> <tr class="table1"><td>3: Here's the third line</td><td>&nbsp;</td><td>3: Here's the other third line</td></tr> </table> </div> 

Here's a similar chunk of html using divs:

<section class="a">

  <div class="c">
    <div class="b">First version</div>
    <div class="b">Second version</div>
  </div>

  <div class="c">
    <div class="b" id="b1-67:1">Here's the first line</div>
    <div class="b" id="b1-74:1">Here's the other first line</div>
  </div>
    <div class="c">
    <div class="b" id="b1-67:2">Here's the second line</div>
    <div class="b" id="b1-74:2">Here's the other second line</div>
  </div>
  <div class="c">
    <div class="b" id="b1-67:3">Here's the third line</div>
    <div class="b" id="b1-74:3">Here's the other third line</div>
  </div>
</section>

I'd be willing to use javascript, jQuery, or CSS to get the hover to work in both directions. Here's a codepen address where the table version can be seen working: https://codepen.io/rdc1/pen/OKVeQv

Answer 1

here's my solution. Check it. Hope it will help.

 .a { border: 1px solid #000; } .c { padding: 5px 5px; } .c:nth-child(1) { font-size: 2em; font-weight: bolder; } .c:hover { background-color: #e5e5e5; } .b { display: inline-block; width: 48%; } 

 <section class="a"> <div class="c"> <div class="b">First version</div> <div class="b">Second version</div> </div> <div class="c"> <div class="b" id="b1-67:1">Here's the first line</div> <div class="b" id="b1-74:1">Here's the other first line</div> </div> <div class="c"> <div class="b" id="b1-67:2">Here's the second line</div> <div class="b" id="b1-74:2">Here's the other second line</div> </div> <div class="c"> <div class="b" id="b1-67:3">Here's the third line</div> <div class="b" id="b1-74:3">Here's the other third line</div> </div> </section>