Is there a way to change the appearance of rows in one table when hovering over rows in another table that are related?
You can find a JSFiddle link illustrating what I am trying to achieve.
Here is an example of the code:
table#table1 #el1:hover + table#table2 tr.el1 {
background: #000 !important;
color: #fff !important;
font-weight: 700 !important;
}
#table1 tr:hover{
cursor: pointer;
}<!-- table 1 -->
<table class="table table-bordered table-hover" id="table1">
<tr id="el1">
<td>Element1</td>
</tr>
<tr id="el2">
<td>Element2</td>
</tr>
<tr id="el3">
<td>Element3</td>
</tr>
</table>
<!-- table 2 -->
<table class="table table-bordered" id="table2">
<tr class="el1">
<td>ReferenceElement1</td>
</tr>
<tr class="el3">
<td>REferenceElement3</td>
</tr>
<tr class="el2">
<td>ReferenceElement2</td>
</tr>
<tr class="el3">
<td>REferenceElement3</td>
</tr>
</table>I am looking for a CSS-only solution to this problem.
Please note that my goal is to apply a hover effect to the row with the id of #el1 in the first table and change the style of corresponding rows in the second table with the .el1 class.