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;

我希望这篇内容能够帮助大家。感谢你们的时间！

- user2766367

---

这里似乎可以工作。http://jsfiddle.net/4zhnP/ ... 你想要这样的东西吗？http://jsfiddle.net/pySY4/ - Josh Crozier

如果您包含一些HTML代码，那么这将更容易。您可能需要执行类似于.header > .navlinks > li > a:hover的操作。 - Albzi

@JoshC 是的，就像那样，但更流畅！ - user2766367

Answer 1

把它们放在 a 上（不是 hover），如果你想要多个过渡效果，你需要一起声明。

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

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

- Moob

---

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

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

- Dan Johnson

---

好的，如果我想要最初的文本颜色是黑色，没有背景，一旦你悬停在上面，过渡开始到背景颜色紫色和文本颜色白色，应该怎么做？ - user2766367

@user2766367 你会得到类似于这样的东西:a:hover{background:purple;color:white;} - Albzi

Answer 3

你应该尝试在标签上设置过渡效果，而不是在上。

你可以在这里找到更多关于过渡效果的信息：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

- vanev_

---

你为什么会推荐那个？ - user2766367