html - 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 而不是 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/