CSS 背景色的过渡
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4411306/
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
Transition of background-color
提问by jean-guy
I'm trying to make a transition effect with background-colorwhen hovering menu items, but it does not work. Here is my CSS code:
我试图background-color在悬停菜单项时制作过渡效果，但它不起作用。这是我的 CSS 代码：
#content #nav a:hover {
color: black;
background-color: #AD310B;
/* Firefox */
-moz-transition: all 1s ease-in;
/* WebKit */
-webkit-transition: all 1s ease-in;
/* Opera */
-o-transition: all 1s ease-in;
/* Standard */
transition: all 1s ease-in;
}
The #navdivis a menu ullist of items.
该#navdiv是菜单ul项列表。
回答by Ilium
As far as I know, transitions currently work in Safari, Chrome, Firefox, Opera and Internet Explorer 10+.
据我所知，过渡目前适用于 Safari、Chrome、Firefox、Opera 和 Internet Explorer 10+。
This should produce a fade effect for you in these browsers:
这应该会在这些浏览器中为您产生淡入淡出效果：
a {
background-color: #FF0;
}
a:hover {
background-color: #AD310B;
-webkit-transition: background-color 1000ms linear;
-ms-transition: background-color 1000ms linear;
transition: background-color 1000ms linear;
}<a>Navigation Link</a>Note:As pointed out by Gerald in the comments, if you put the transition on the a, instead of on a:hoverit will fade back to the original color when your mouse moves away from the link.
注意：正如 Gerald 在评论中指出的那样，如果您将过渡放在a, 而不是 on 上a:hover，当您的鼠标移开链接时，它会逐渐变回原始颜色。
This might come in handy, too: CSS Fundamentals: CSS 3 Transitions
这也可能派上用场：CSS Fundamentals: CSS 3 Transitions
回答by Reza Mamun
To me, it is better to put the transition codes with the original/minimum selectors than with the :hover or any other additional selectors:
对我来说，将转换代码与原始/最小选择器放在一起比使用 :hover 或任何其他附加选择器要好：
#content #nav a {
background-color: #FF0;
-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;
}
#content #nav a:hover {
background-color: #AD310B;
}<div id="content">
<div id="nav">
<a href="#link1">Link 1</a>
</div>
</div>