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