Force-CSS-Stil-Taste auf "unhover" (nur Firefox)

Question

Ich habe einen Link

<a href="http://someplace.com/url.htm" class="button">CLICK HERE</a> 

dieses CSS gestylt

.button{ 
    text-decoration:none; text-align:center; 
    padding:10px 0px; 
    border:solid 1px #000000; 
    font:14px Arial, Helvetica, sans-serif; 
    font-weight:bold; 
    color:#2b2b2b; 
    background-color:#D6E7F6; 
    display: inline-block; 
    width:25% 
} 
.button:hover{ 
    background-color:#77AEDC; 
    color:#2b2b2b; 
} 
.button:active{ 
} 

Wenn ich über die Schaltfläche schweben sie Farbe richtig verändert. Wenn ich auf den Link klicke, öffnet sich der richtige Link. Wenn ich auf die Zurück-Schaltfläche des Browsers klicke, bleibt die Farbe der Schaltfläche die Hover-Farbe.

Wie bekomme ich die Schaltfläche (n) zu allen "unhover", wenn die Seite neu geladen wird? Dies ist nur ein Problem in Firefox (sowohl PC-und Android-Versionen).

Hier ist ein Beispiel-Website, die Frage

http://www.filedropper.com/websitetest_1

zeigt Wenn Sie zum Download und dass Sie die htm in einen Ordner extrahieren mit Firefox öffnen kann und das Problem sehen.

Hier ist eine Bildschirmaufnahme von was passiert, was ich meine. Wenn die Zurück-Schaltfläche geklickt wird, möchte ich, dass die erste Schaltfläche nicht im Schwebezustand ist.

http://www.filedropper.com/example_2

Hinzufügen von besucht, dh

.button{ 
    text-decoration:none; text-align:center; 
    padding:10px 0px; 
    border:solid 1px #000000; 
    font:14px Arial, Helvetica, sans-serif; 
    font-weight:bold; 
    color:#2b2b2b; 
    background-color:#D6E7F6; 
    display: inline-block; 
    width:25% 
} 
.button:visited{ 
    color:#2b2b2b; 
    background-color:#D6E7F6; 
} 
.button:hover{ 
    background-color:#77AEDC; 
    color:#2b2b2b; 
} 
.button:active{ 
} 

hilft nicht. Wenn Sie auf die Schaltfläche "Firefox zurück" klicken, bleibt die Schaltfläche mit dem Status "Deaktiviert" erhalten. Und ein Nebeneffekt ist, dass dann der Hover für jede Taste deaktiviert wird, die bereits besucht wurde.

Hoffnung, die alles klar macht.

Danke für irgendwelche Tipps.

Answer 1

Try this:

a.button:visited{ 
    background-color:#77AEDC; 
    color:#2b2b2b; 
}