I recently created a control panel in Dutch where hovering over CV or "geen afspraak" reveals relevant content. However, I encountered an issue - when hovering over CV, "geen afspraak" overlaps the other text, making it partially unreadable. Can anyone offer a solution to this problem?
To make certain objects appear correctly when hovered over, I used position:absolute or relative depending on their purpose. This may be causing the issue, but I'm unsure how to fix it.
.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... (truncated)
<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 cl... (truncated)