CSS-轉換不起作用

Question

大家好我目前正在嘗試做一個轉換，當你將鼠標懸停在背景上變成紫色，文字顏色變成白色時（原本沒有背景顏色，文字顏色是黑色的...... ）

但它不工作！

什麼是我做錯了！？

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

所以///編輯爲大家不斷告訴我，將其添加上的，而不是一個：懸停......

初始狀態：

text-color:black; 
background:none; 

徘徊狀態：

平滑過渡到：

text-color:white; 
background:black; 

我希望這可以幫助大家出去 感謝您的時間！

Answer 1

把它們放在一個（不懸停），如果你想多轉換，你必須將它們申報在一起。

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

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

Answer 2

不要在：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; 
} 

然後設置:hover屬性的實際變化。 例如，

a:hover{ 
color:green; 
} 

Answer 3

你應該嘗試設置在a的轉換，而不是a:hover。

你可以在這裏找到過渡的更多信息：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions