Почему этот переход CSS не работает должным образом? [дубликат] ⇐ Html

[Anonymous]

У меня есть кнопка отправки в форме, и я пытаюсь сделать простой переход при наведении курсора мыши. Я хочу, чтобы он поменял местами цвета текста кнопки и цвет фона кнопки. Как у меня сейчас, текст успешно меняется со временем, но цвет фона по-прежнему мгновенно меняет цвет. Как это исправить, чтобы цвет фона также менялся со временем? Я использую Google Chrome, поэтому добавляю только -webkit-transition. Как только это заработает, я добавлю остальные для других браузеров.

Вот мой упрощенный код:

Код: Выделить всё

CSS:

Код: Выделить всё

#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/

Подробнее здесь: https://stackoverflow.com/questions/315 ... s-intended