Warum funktioniert dieser CSS-Übergang nicht wie beabsichtigt? [Duplikat] ⇐ HTML

[Anonymous]

Ich habe eine Senden-Schaltfläche in einem Formular und versuche, einen einfachen Übergang beim Bewegen des Mauszeigers durchzuführen. Ich möchte, dass die Farben des Schaltflächentextes und der Hintergrundfarbe der Schaltfläche vertauscht werden. So wie ich es gerade habe, ändert sich der Text im Laufe der Zeit erfolgreich, aber die Hintergrundfarbe wechselt immer noch sofort die Farbe. Wie behebe ich das, damit sich die Hintergrundfarbe im Laufe der Zeit auch ändert? Ich verwende Google Chrome, daher habe ich nur den -webkit-Übergang eingefügt. Sobald das funktioniert, füge ich die anderen für andere Browser hinzu.

Hier ist mein vereinfachter Code:

Code: Select all

CSS:

Code: Select all

#signupform
form
.submitbutton {
margin: 0 auto;
border-radius: 5px;
border: solid 2px #66cc66;
background-color: #66cc66;
color: white;
-webkit-transition: background-color 1s;
-webkit-transition: color 0.5s; }
#signupform
form
.submitbutton:hover {
background-color: white;
color: #66cc66;
-webkit-transition: background-color 1s;
-webkit-transition: color 0.5s; }

http://jsfiddle.net/ewkruuk3/