Auf Thema antworten 2026

JavaScript ist deaktiviert. Für eine bessere Darstellung aktiviere bitte JavaScript in deinem Browser, bevor du fortfährst.

Beitrag: <blockquote data-quote="Hanskrampf" data-source="post: 2022333" data-attributes="member: 460673"><p><span style="font-family: 'Arial'"><span style="font-size: 12px">Hi.</span></span></p><p><span style="font-family: 'Arial'"><span style="font-size: 12px">  </span></span></p><p><span style="font-family: 'Arial'"><span style="font-size: 12px"></span></span> <span style="font-family: 'Arial'"><span style="color: #000000"><span style="font-size: 12px">Ich habe eine Frage zu der Pseudoklasse :hover.</span></span></span><span style="font-family: 'Arial'"></span></p><p><span style="font-family: 'Arial'"></span>  <span style="font-family: 'Arial'"><span style="color: #000000"><span style="font-size: 12px">Ich  habe einen HTML/CSS Button. Siehe Bild 1. Als :hover bekommt der Button  einen Schlagschatten (box-shadow - in Bild 2 zu sehen). Wenn man  daraufklickt, wird über eine JavaScript Funktion der restliche Inhalt  der Box ausgeblendet.</span></span></span><span style="font-family: 'Arial'"></span></p><p><span style="font-family: 'Arial'"></span>  <span style="font-family: 'Arial'"><span style="color: #000000"><span style="font-size: 12px">Allerdings  bleibt der :hover Effekt bestehen (Bild 2) und verschwindet erst, wenn  man irgendwo außerhalb des Buttons klickt. Einfaches rausfahren mit der  Maus bringt nichts.</span></span></span><span style="font-family: 'Arial'"></span></p><p><span style="font-family: 'Arial'"></span></p><p><span style="font-family: 'Arial'"></span>  <span style="font-family: 'Arial'"><span style="color: #000000"><span style="font-size: 12px">Wie umgehe ich das, bzw. wie wird der Button ohne den :hover Effekt angezeigt, nachdem man darauf geklickt hat?</span></span></span><span style="font-family: 'Arial'"></span></p><p><span style="font-family: 'Arial'"></span></p><p><span style="font-family: 'Arial'"></span>  <span style="font-family: 'Arial'"><span style="color: #000000"><span style="font-size: 12px">Das  Problem besteht im Firefox, IE und Opera. In Chrome und Safari  funktioniert das ganze so wie es gedacht ist. (jeweils aktuellste  Browserversion)</span></span></span><span style="font-family: 'Arial'"></span></p><p><span style="font-family: 'Arial'"></span></p><p><span style="font-family: 'Arial'"><span style="font-size: 12px">Vielen Dank schonmal für die Antworten.</span></span></p><p><span style="font-family: 'Arial'"></span> <span style="font-family: 'Arial'"><span style="color: #000000"><span style="font-size: 12px"></span></span></span></p><p><span style="font-family: 'Arial'"><span style="color: #000000"><span style="font-size: 12px"></span></span></span><span style="font-family: 'Arial'"></span></p><p><span style="font-family: 'Arial'"></span> <span style="font-family: 'Arial'"><span style="color: #000000"><span style="font-size: 12px">Bild 1</span></span></span></p><p><span style="font-family: 'Arial'"><span style="color: #000000"><span style="font-size: 12px"></span></span></span><span style="font-family: 'Arial'"></span></p><p><span style="font-family: 'Arial'"></span>  <span style="font-family: 'Arial'"></span></p><p><span style="font-family: 'Arial'"></span><span style="font-family: 'Arial'"></span></p><p><span style="font-family: 'Arial'">Bild 2</span></p><p><span style="font-family: 'Arial'"></span><span style="font-family: 'Arial'"></span></p><p><span style="font-family: 'Arial'"></span></p><p><span style="font-family: 'Arial'">HTML</span></p><p><span style="font-family: 'Arial'">[HTML]<input type="button" onClick="javascript:aufklappen('ads')" value="Show/Hide Ads">[/HTML]CSS</span></p><p><span style="font-family: 'Arial'">[CODE]input[type="button"], input[type="submit"], input[type="reset"] {</span></p><p><span style="font-family: 'Arial'">    cursor: pointer;</span></p><p><span style="font-family: 'Arial'">    padding: 0 5px;</span></p><p><span style="font-family: 'Arial'">    font-family: 'ActionManRegular', sans-serif;</span></p><p><span style="font-family: 'Arial'">    font-size: 16px;</span></p><p><span style="font-family: 'Arial'">    border: 2px solid #000;</span></p><p><span style="font-family: 'Arial'">    background-color: #ff9;</span></p><p><span style="font-family: 'Arial'">}</span></p><p><span style="font-family: 'Arial'"></span></p><p><span style="font-family: 'Arial'">input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover,</span></p><p><span style="font-family: 'Arial'">input[type="button"]:focus, input[type="submit"]:focus, input[type="reset"]:focus {</span></p><p><span style="font-family: 'Arial'">    box-shadow: 5px 5px #888;</span></p><p><span style="font-family: 'Arial'">    -moz-box-shadow: 5px 5px #888;</span></p><p><span style="font-family: 'Arial'">    -webkit-box-shadow: 5px 5px #888;</span></p><p><span style="font-family: 'Arial'">}</span></p><p><span style="font-family: 'Arial'"></span></p><p><span style="font-family: 'Arial'">input[type="button"]:active, input[type="submit"]:active, input[type="reset"]:active {</span></p><p><span style="font-family: 'Arial'">    position: relative;</span></p><p><span style="font-family: 'Arial'">    top: 5px;</span></p><p><span style="font-family: 'Arial'">    right: -5px;</span></p><p><span style="font-family: 'Arial'">    box-shadow: none;</span></p><p><span style="font-family: 'Arial'">    -moz-box-shadow: none;</span></p><p><span style="font-family: 'Arial'">    -webkit-box-shadow: none;</span></p><p><span style="font-family: 'Arial'">}[/CODE]JavaScript</span></p><p><span style="font-family: 'Arial'">[CODE]function aufklappen(toggle)</span></p><p><span style="font-family: 'Arial'">    {</span></p><p><span style="font-family: 'Arial'">        var elem=document.getElementById(toggle);</span></p><p><span style="font-family: 'Arial'">        if(elem.style.display=="none")</span></p><p><span style="font-family: 'Arial'">            {elem.style.display="block";}</span></p><p><span style="font-family: 'Arial'">        else</span></p><p><span style="font-family: 'Arial'">            {elem.style.display="none";}</span></p><p><span style="font-family: 'Arial'">    }[/CODE]</span> <span style="font-family: 'Arial'"></span></p><p><span style="font-family: 'Arial'"></span></p></blockquote><p></p> Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.

Authentifizierung: Wenn ▲ = 5, ▼ = 2 und ■ = 7, was ist ▲ × ▼ + ■?

Oben