Question

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

我使用Mr Lister建议从position:absolute删除veeltekst来解决此问题。

悬停使元素显示在彼此之上

1 个答案: