CSS- Transition funktioniert nicht

Question

Hallo alle, die ich gerade versuche, einen Übergang zu machen, wenn Sie den Hintergrund schwenken, wird lila und die Textfarbe wird weiß (ursprünglich gibt es keine Hintergrundfarbe und die Textfarbe ist schwarz ...)

Aber es funktioniert nicht!

Was ist es, dass ich falsch mache?

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

So /// EDIT wie jeder sagt mir, hält es auf ein hinzuzufügen statt a: schweben ...

Ausgangszustand:

text-color:black; 
background:none; 

schwebten Zustand:

Glatter Übergang zu:

text-color:white; 
background:black; 

Ich hoffe, das hilft allen aus Danke für Ihre Zeit!

Answer 1

sie Setzen Sie auf die eine (nicht der Hover) und wenn Sie mehrere Übergänge wollen, müssen Sie sie zusammen erklären.

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

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

Answer 2

Setzen Sie den Übergang nicht auf die Eigenschaft: 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; 
} 

Dann setzen, was tatsächlich auf der :hover Eigenschaft ändert. Zum Beispiel

a:hover{ 
color:green; 
} 

Answer 3

Sie sollten versuchen, die Übergänge auf dem a zu setzen, anstelle des a:hover.

können Sie weitere Informationen über Übergänge finden Sie hier: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions