代码之家 › 专栏 › 技术社区 › dekzok

悬停使元素相互重叠

css-position position hover css html

dekzok · 技术社区 · 6 年前

这是我正在研究的(荷兰)控制面板。当您将鼠标悬停在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>

1 回复 | 直到 6 年前

dekzok 6 年前

我使用修复了此问题 Mr Lister 建议删除 position:absolute 从…起 veeltekst 。