9

大家好，当您将鼠标悬停在背景变为紫色并且文本颜色变为白色时，我目前正在尝试进行过渡。（最初没有背景颜色并且文本颜色为黑色......）

但它不起作用！

我做错了什么！？

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;

我希望这对大家有所帮助谢谢您的时间！

4

3 回答 3

8

将它们放在 a （不是悬停）上，如果你想要多个转换，你必须一起声明它们。

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

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

于 2013-10-14T16:39:04.660 回答
5

不要在 :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;
}
于 2013-10-14T16:03:12.907 回答
1

您应该尝试在a, 而不是a:hover.

您可以在此处找到有关转换的更多信息：https ://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

于 2013-10-14T16:03:27.837 回答