Display table when hovering over row of another table - html

Question

I would like to display a certain table when the user hovers over the row of another table without using any JS. I have seen solutions for similar things but they require your elements to be descendent, child or adjacent elements. I would like the tables to be properly seperated though. Kind of like:
#HS {
display: none;
}
#Uni {
display: none;
}
#HSrow:hover {
background-color: rgba(167, 177, 189);
}
.HSrow:hover+.HS {
display: block;
}
.HSrow:hover+.Uni {
display: block;
}
#Unirow:hover {
background-color: rgba(167, 177, 189);
color: black;
}
body {
color: white;
font-family: din6776;
font-size: var(--fs-body);
line-height: 1.6;
background-image: url(../img/Body_6.png);
background-repeat: repeat-y;
background-size: 100% auto;
background-attachment: fixed;
padding: 0 5vw 10vh 5vw;
}
table {
margin-left: auto;
background-color: rgba(0, 97, 182, 0.7);
}
table,
th,
td {
border: 1px solid #cccccc;
}
th,
td {
padding: 5px;
}
tr:nth-child(even) {
background-color: rgba(140, 140, 140, 0.4);
}
<div class="container">*,
<table id="Edu" style="width:35vw">
<thead>
<tr>
<th>Timespan</th>
<th>Place</th>
<th>Description</th>
</tr>
</thead>
<tr id="HSrow">
<th>09.2010 – 11.2014</th>
<td>HS</td>
<td>Engineering</td>
</tr>
<tr id="Unirow">
<th>10.2012 – 01.2013</th>
<td>University 2</td>
<td>Laboratory</td>
</tr>
</table>
<table id="HS" style="width:35vw">
<thead>
<tr>
<th id="texthead" colspan="6">HS</th>
</tr>
</thead>
<tbody>
<tr>
<td id="Description">Version</td>
<td id="Description" colspan="3">Name</td>
<td id="Description" colspan="3">Date</td>
</tr>
<tr>
<td>V 1.0</td>
<td colspan="3">John Doe</td>
<td colspan="3">12345</td>
</tr>
<tr>
<td id="Description" colspan="3">lalala</td>
<td id="Description" colspan="3">lalala</td>
</tr>
<tr>
<td colspan="3">lalala</td>
<td colspan="3">lalala</td>
</tr>
</tbody>
</table>
<table id="Uni" style="width:35vw">
<thead>
<tr>
<th id="texthead" colspan="6">Uni</th>
</tr>
</thead>
<tbody>
<tr>
<td id="Description">Version</td>
<td id="Description" colspan="3">Name</td>
<td id="Description" colspan="3">Date</td>
</tr>
<tr>
<td>V 1.0</td>
<td colspan="3">John Doe</td>
<td colspan="3">12345</td>
</tr>
<tr>
<td id="Description" colspan="3">lalala</td>
<td id="Description" colspan="3">lalala</td>
</tr>
<tr>
<td colspan="3">lalala</td>
<td colspan="3">lalala</td>
</tr>
</tbody>
</table>
</div>
I would like the table with the id "HS" to pop up when I hover over "HSrow" and the same for the Uni table.
Is it possible without JS?
Best Regards

Answer 1

In case someone finds this later, I have been able to solve this using "onmouseover" and "onmouseout" together with a "makevis" and "makinvis" command:
<tr class="hover" onmouseover="makevis('HStable')" onmouseout="makeinvis('HStable')">