Problem mit Pseudoklasse ":hover"

[Hanskrampf]

Hi.

Ich habe eine Frage zu der Pseudoklasse :hover.
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.
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.

Wie umgehe ich das, bzw. wie wird der Button ohne den :hover Effekt angezeigt, nachdem man darauf geklickt hat?

Das Problem besteht im Firefox, IE und Opera. In Chrome und Safari funktioniert das ganze so wie es gedacht ist. (jeweils aktuellste Browserversion)

Vielen Dank schonmal für die Antworten.


Bild 1



Bild 2


HTML

<input type="button" onClick="javascript:aufklappen('ads')" value="Show/Hide Ads">

CSS

input[type="button"], input[type="submit"], input[type="reset"] {
    cursor: pointer;
    padding: 0 5px;
    font-family: 'ActionManRegular', sans-serif;
    font-size: 16px;
    border: 2px solid #000;
    background-color: #ff9;
}

input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover,
input[type="button"]:focus, input[type="submit"]:focus, input[type="reset"]:focus {
    box-shadow: 5px 5px #888;
    -moz-box-shadow: 5px 5px #888;
    -webkit-box-shadow: 5px 5px #888;
}

input[type="button"]:active, input[type="submit"]:active, input[type="reset"]:active {
    position: relative;
    top: 5px;
    right: -5px;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}

JavaScript

function aufklappen(toggle)
    {
        var elem=document.getElementById(toggle);
        if(elem.style.display=="none")
            {elem.style.display="block";}
        else
            {elem.style.display="none";}
    }

 

[MyBad]

AW: Problem mit Pseudoklasse ":hover"

Der Hover-Effekt bleibt natürlich bestehen, wenn du diese Formatierung auch der Pseudoklasse :focus zuweist. Diese wird immer dann gesetzt, wenn ein Element den Focus erhält. Mit einem Klick tust du genau dies.

Außerdem frage ich mich, warum du Input-Tag verwendest. Das ist jetzt nicht schlimm. Aber ich finde hier ein a-Tag oder zumindest das Button-Tag angebrachter.

 

[Hanskrampf]

AW: Problem mit Pseudoklasse ":hover"

Vielen dank!

 

[Tr3icio]

AW: Problem mit Pseudoklasse ":hover"

Nur ein kleiner Tipp: onClick="javascript:aufklappen('ads')" gibt es so eigentlich gar nicht
1. Es heißt onclick, da kennt HTML keine Groß- und Kleinschreibung
2. Das "javscript:" ist unnötig, da du dich dort im Endeffekt schon in einer Funktion befindest, die IMMER Javascript ist ;-)

onclick="aufklappen('ads')" wäre die kurze (und mal angemerkt ziemlich hässliche) Variante.
(Sieh dir lieber mal an, wie du deine Eventlistener in JS direkt setzt, ist sauberer)

 

[Hanskrampf]

AW: Problem mit Pseudoklasse ":hover"

1. Da es egal ist, schreibe ich es eben so, finde ich lesbarer als onmouseover o.ä. längere Begriffe.
2. Danke, das wusste ich nicht. Wird in Zukunft weggelassen.
3. Was meinst du mit "hässlicher Variante"? Ich verwende die Funktion noch an anderen Stellen, deswegen ist sie allgemein geschrieben und in HTML schreibe ich erst, auf was es sich beziehen soll. Oder was meinst du genau?