悬停使元素彼此重叠

Question

这是我正在开发的（荷兰语）控制面板。当您将鼠标悬停在 CV 或 geen afspraak 上时，会显示相关内容。唯一的问题：当您将鼠标悬停在 CV 上时，geen afspraak 会出现在其他文本上，使其部分无法阅读。有人知道如何解决这个难题吗？

（为了使某些对象在悬停时以正确的方式显示，我给了它们位置：绝对或相对，具体取决于其目标。这可能会导致问题，但我不知道如何解决。）

.control_panel {
  background-image: url(https://image.freepik.com/vrije-psd/witte-houtstructuur-achtergrond-ontwerp_1022-75.jpg);
  height: 400px;
  width: 400px;
  margin: 0 auto;
  margin-top: 100px;
  padding: 10px;
  border-radius: 4px;
}

.witte_achtergrond {
  padding: 12px;
  font-size: 16px;
  cursor: pointer;
}

.acsuel-dropdown {
  display: none;
  position: absolute;
  display: none;
  width: 100%;
  overflow: auto;
}

#broer:hover .acsuel-dropdown {
  display: block;
}

.geen_afspraak {
  position: relative;
}

#broer:hover {
  cursor: pointer;
}

#broer {
  position: relative;
}

.hoer:hover .veeltekst {
  display: block;
}

#saaf {
  position: absolute;
  width: 100%;
  height: 100%;
  margin-top: -220px;
  margin-left: -10px;
}

.hoer {
  position: relative;
}

.veeltekst {
  text-overflow: none;
  white-space: normal;
  overflow: auto;
  display: none;
  position: absolute
}

<div class="control_panel">
  <div class="witte_achtergrond">Verklaring Omtrent het Gedrag</div>
  <div class="hoer">
    <div class="witte_achtergrond hover">CV</div>
    <p class="veeltekst">De afgelopen vijf jaar ben ik gepromoveerd op natuurwetenschappen, toen ben ik me nog meer gaan focussen op mijn werk als regisseur. Ik heb een zoon gekregen en heb verschillende bijbanen gehad in de filmwereld.<br><br> Creatief en enthousiast</p>
  </div>
  <div id="broer">
    <div class="witte_achtergrond geen_afspraak hover">
      geen afspraak
    </div>
    <div class="acsuel-dropdown">
      <table>
        <thead>
          <tr>
            <th class="wk">wk</th>
            <th>ma</th>
            <th>di</th>
            <th>wo</th>
            <th>do</th>
            <th>vr</th>
            <th class="weekend">za</th>
            <th class="weekend">zo</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="wk">13 </td>
            <td class="sq" class="previous" data-d ate="2018-03-26">26</td>
            <td class="previous" data-date="2018-03-27">27</td>
            <td class="previous" data-date="2018-03-28">28</td>
            <td class="previous" data-date="2018-03-29">29</td>
            <td class="previous" data-date="2018-03-30">30</td>
            <td class="previous weekend" data-date="2018-03-31">31</td>
            <td class="weekend" data-date="2018-04-01">1</td>
          </tr>
          <tr>
            <td class="wk">14 </td>
            <td data-date="2018-04-02">2</td>
            <td data-date="2018-04-03">3</td>
            <td data-date="2018-04-04">4</td>
            <td data-date="2018-04-05">5</td>
            <td data-date="2018-04-06">6</td>
            <td class="weekend" data-date="2018-04-07">7</td>
            <td class="weekend" data-date="2018-04-08">8</td>
          </tr>
          <tr>
            <td class="wk">15 </td>
            <td data-date="2018-04-09">9</td>
            <td data-date="2018-04-10">10</td>
            <td data-date="2018-04-11">11</td>
            <td data-date="2018-04-12">12</td>
            <td data-date="2018-04-13">13</td>
            <td class="weekend" data-date="2018-04-14">14</td>
            <td class="weekend" data-date="2018-04-15">15</td>
          </tr>
          <tr>
            <td class="wk">16 </td>
            <td data-date="2018-04-16">16</td>
            <td data-date="2018-04-17">17</td>
            <td data-date="2018-04-18">18</td>
            <td data-date="2018-04-19">19</td>
            <td data-date="2018-04-20">20</td>
            <td class="weekend" data-date="2018-04-21">21</td>
            <td class="weekend" data-date="2018-04-22">22</td>
          </tr>
          <tr>
            <td class="wk">17 </td>
            <td data-date="2018-04-23">23</td>
            <td data-date="2018-04-24">24</td>
            <td data-date="2018-04-25">25</td>
            <td data-date="2018-04-26">26</td>
            <td data-date="2018-04-27">27</td>
            <td class="weekend" data-date="2018-04-28">28</td>
            <td class="weekend" data-date="2018-04-29">29</td>
          </tr>
          <tr>
            <td class="wk">18 </td>
            <td data-date="2018-04-30">30</td>
            <td class="next" data-date="2018-05-01">1</td>
            <td class="next" data-date="2018-05-02">2</td>
            <td class="next" data-date="2018-05-03">3</td>
            <td class="next" data-date="2018-05-04">4</td>
            <td class="weekend next" data-date="2018-05-05">5</td>
            <td class="weekend next" data-date="2018-05-06">6</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

Answer 1

我使用Mr Listers 解决了这个问题，建议从veeltekst 中删除position:absolute。