CSS-过渡不起作用答案

【问题标题】：CSS- Transition not workingCSS-过渡不起作用
【发布时间】：2013-10-22 06:14:10
【问题描述】：

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

但它不起作用！

我做错了什么！？

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;

希望对大家有所帮助感谢您的宝贵时间！

【问题讨论】：

它似乎在这里工作。 jsfiddle.net/4zhnP ...你想要这样的东西吗？ jsfiddle.net/pySY4
如果你包含一些 html 会更容易。你可能需要做类似.header > .navlinks > li > a:hover
@JoshC 是的，类似但更流畅！

标签： html css transition

【解决方案1】：

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

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

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

【讨论】：

谢谢，您的描述和解决方案提供了清晰、简洁的信息，说明了为什么以及如何做。 :D

【解决方案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;
}

【讨论】：

好的，所以如果我最初希望文本颜色为黑色，没有背景，一旦您将鼠标悬停，过渡开始为背景颜色紫色和文本颜色白色，那会怎样？
@user2766367 你会有这样的东西：a:hover{background:purple;color:white;}

【解决方案3】：

您应该尝试在a 而不是a:hover 上设置过渡。

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

【讨论】：

你为什么推荐它？