将鼠标悬停在另一行 table 上时显示 table

Question

我想在不使用任何 JS 的情况下，在用户将鼠标悬停在另一个 table 的行上时显示某个 table。我见过类似事情的解决方案，但它们要求您的元素是后代元素、子元素或相邻元素。不过，我希望 tables 能够正确分开。有点像：

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

我希望当我将鼠标悬停在“HSrow”上时弹出 ID 为“HS”的 table，Uni table 也是如此。没有JS可以吗？

此致

Answer 1

如果以后有人发现这个问题，我已经能够使用“onmouseover”和“onmouseout”以及“makevis”和“makinvis”命令来解决这个问题：

<tr class="hover" onmouseover="makevis('HStable')" onmouseout="makeinvis('HStable')">

将鼠标悬停在另一行 table 上时显示 table

Display table when hovering over row of another table

html

css

hover

css-tables