basti1012.bplaced.net

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.

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>