CSS- Przejście nie działa

Question

Witam wszystkich, którzy obecnie próbuję wykonać przejście, gdy się najedziesz, tło zmieni kolor na fioletowy, a kolor tekstu zmieni się na biały (początkowo nie ma koloru tła, a tekst jest czarny ...)

Ale to nie działa!

Co robię źle !?

a:hover { 
    color: white; 
    -webkit-transition: color 1000ms linear; 
    -moz-transition: color 1000ms linear; 
    -o-transition: color 1000ms linear; 
    -ms-transition: color 1000ms linear; 
    transition: color 1000ms linear; 
    background-color: purple; 
    -webkit-transition: background-color 1000ms linear; 
    -moz-transition: background-color 1000ms linear; 
    -o-transition: background-color 1000ms linear; 
    -ms-transition: background-color 1000ms linear; 
    transition: background-color 1000ms linear; 
} 

Więc /// EDIT jak każdy powtarza mi, aby dodać go na zamiast: hover ...

Stan początkowy:

text-color:black; 
background:none; 

stan unosił:

Płynne przejście do:

text-color:white; 
background:black; 

Mam nadzieję, że pomoże to wszystkim Dziękujemy za poświęcony czas!

Answer 1

umieścić je na (nie do zawisu), a jeśli chcesz przejść wiele trzeba zadeklarować je razem.

-webkit-transition: color 1000ms linear, background-color 1000ms linear; 

http://jsfiddle.net/4zhnP/1/

Answer 2

Nie ustawiaj przejścia dla właściwości: hover.

a { 
color: white; 
-webkit-transition: color 1000ms linear; 
-moz-transition: color 1000ms linear; 
-o-transition: color 1000ms linear; 
-ms-transition: color 1000ms linear; 
transition: color 1000ms linear; 
background-color: purple; 
-webkit-transition: background-color 1000ms linear; 
-moz-transition: background-color 1000ms linear; 
-o-transition: background-color 1000ms linear; 
-ms-transition: background-color 1000ms linear; 
transition: background-color 1000ms linear; 
} 

Następnie należy ustawić, co właściwie się zmienia w przypadku właściwości :hover. Na przykład

a:hover{ 
color:green; 
} 

Answer 3

Należy starać się ustawić przejścia na a zamiast a:hover.

można znaleźć więcej informacji na przejściach tutaj: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions