Html CSS-过渡不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19364322/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS- Transition not working
提问by user2766367
Hello everyone I'm currently trying to do a transition when you hover the background turns purple and the text-color turns white.(originally there's no background color and the text-color is black...)
大家好，当您悬停背景变为紫色并且文本颜色变为白色时，我目前正在尝试进行过渡。（最初没有背景颜色并且文本颜色为黑色......）
But it ain't working!
但它不起作用！
What is it that Im doing wrong!?
我做错了什么！？
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;
}
So///EDIT as everyone keeps telling me to add it on a instead of a:hover...
所以///编辑因为每个人都一直告诉我将它添加到 a 而不是 a:hover ...
Initial state:
初始状态：
text-color:black;
background:none;
Hovered state:
悬停状态：
Smooth Transition to:
平滑过渡到：
text-color:white;
background:black;
I hope this helps everyone out Thanks for your time!
我希望这对大家有所帮助 感谢您的时间！
采纳答案by Moob
Put them on the a (not the hover) AND if you want multiple transitions you have to declare them together.
把它们放在 a （不是悬停）上，如果你想要多个过渡，你必须一起声明它们。
-webkit-transition: color 1000ms linear, background-color 1000ms linear;
回答by Dan Johnson
Don't set the transition on the :hover property.
不要在 :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;
}
Then set what is actually changing on the :hoverproperty.
For example,
然后设置:hover属性上实际发生的变化。例如，
a:hover{
color:green;
}
回答by vanev_
You should try to set the transitions on the a, instead of the a:hover.
您应该尝试在 上设置过渡a，而不是在a:hover.
You can find more information on transitions here: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions
您可以在此处找到有关过渡的更多信息：https: //developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions
