Jimdo Hover/Mouseover Farbwechsel
Ich habe eine Jimdo Homepage, bei der ich einen ausklappbaren Text einfügen möchte.
Das hat soweit auch tatsächlich funktioniert.
Jetzt möchte ich allerdings noch den Link/Button "mehr..." noch editieren.
Und zwar dahingehend, dass er die Farbe von Schwarz auf Cyan wechselt, wenn man mit der Mouse darüber fährt.
Also einfach einen klassischen Mouseover/Hover Effekt.
Der hier verwendete Code
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
.checkbox{
display:none;
position:absolute;
left:-2222px;
}
.box{
width:200px;
min-height:30px;
position:relative;
border-radius:5px;
margin:0px auto;
}
.box:nth-child(2){
margin-top:150px;
}
.mehr{
position:absolute;
z-index:0;
border:1px solid black;
border-radius:5px;
top:0;
transition:200ms top;
height:30px;
display:block;
overflow:hidden;
}
.checkbox:checked ~ .mehr{
transition:200ms top;
height:auto;
padding:10px;
top:30px;
border-radius:5px;
}
.displaywenniger{
display:none;
}
.checkbox:checked ~ label > .displaywenniger{
display:block;
}
.checkbox:checked ~ label > .displaymehr{
display:none;
}
label{
width:100%;
text-align:center;
position:absolute;
z-index:1;
background:white;
border:1px solid black;
display:block;
height:30px;
border-radius:5px;
padding:5px 15px;
}
label:hover{
background:black;
color:cyan;
font-weight:900;
}
</style>
<div class="box">
<input type="checkbox" class="checkbox" id="open">
<label for="open"><span class="displaymehr">mehr1...</span><span class="displaywenniger">wenniger1...</span></label>
<div class="mehr">
text1
dieser Text wird bei klicken auf mehr... zusätzlich angezeigt/aufgeklappt
</div>
</div>
<div class="box">
<input type="checkbox" class="checkbox" id="open1">
<label for="open1"><span class="displaymehr">mehr2...</span><span class="displaywenniger">wenniger2...</span></label>
<div class="mehr">
text2
dieser Text wird bei klicken auf mehr... zusätzlich angezeigt/aufgeklappt
</div>
</div>