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

所以///编辑,因为每个人都告诉我将其添加到a而不是:hover ...

初始状态:

text-color:black;
background:none;

悬停状态:

顺利过渡到:

 text-color:white;
background:black;

我希望这能帮助大家感谢您的时间!

Answer 1

把它们放在a(而不是悬停)上.如果你想要多个转换,你必须将它们一起声明.

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