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>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!