CSS- transizione non funziona

Question

Ciao a tutti Attualmente sto cercando di fare una transizione quando si passa lo sfondo diventa viola e il testo-colore diventa bianco. (Originariamente non c'è colore di sfondo e il testo-colore è nero ...)

Ma non funziona!

Che cosa è che sto facendo male !?

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; 
} 

EDIT Così /// come tutti continuano a dirmi di aggiungere su un posto di a: hover ...

Stato iniziale:

text-color:black; 
background:none; 

stato Hovered:

Smooth Transizione a:

text-color:white; 
background:black; 

Spero che questo aiuti tutti fuori Grazie per il vostro tempo!

Answer 1

Mettetele sulla A (non il passaggio del mouse) e se volete più transizioni si deve dichiarare insieme.

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

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

Answer 2

Non impostare la transizione sulla proprietà: 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; 
} 

Quindi impostare ciò che sta effettivamente cambiando sulla proprietà :hover. Per esempio,

a:hover{ 
color:green; 
} 

Answer 3

Si dovrebbe cercare di impostare le transizioni sul a, al posto del a:hover.

È possibile trovare maggiori informazioni sulle transizioni qui: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions