当两个ID都悬停时，是否同时更改两个ID的背景颜色？

Question

我希望将鼠标悬停在两个div上，以在两个div中实现背景颜色的更改。

我编写了一个两列表格，其中显示了同一文本的两个不同版本，以便人们可以轻松地看到一个文本版本与另一个文本版本之间的差异。 我包含了一个悬停功能，以便读者可以确定他们在A列中的位置与col中的位置相同。 B.但是在某些地方，文本差异很大，以致逐行比较不能满足读者的需求。 因此，我将表格更改为一系列div。 但是我不知道如何编码CSS，以便将鼠标悬停在例如col的第500行的div上。 B影响两个列的背景颜色。 B，第500行和col。 A，第492行，或将鼠标悬停在col上。 A行492以相同的方式影响两个列的背景颜色。 A，线492和col。 B，第500行。希望这是有道理的。

 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> 

这是使用div的类似HTML块：

<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>

我愿意使用javascript，jQuery或CSS使鼠标悬停在两个方向上都能正常工作。 这是一个可以查看表格版本的codepen地址： https ://codepen.io/rdc1/pen/OKVeQv

Answer 1

这是我的解决方案。 核实。 希望它会有所帮助。

 .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>