![背景颜色]( "背景颜色")
本文介绍了背景颜色的过渡的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图使用背景颜色，当悬停菜单项时，但它不工作的过渡效果。这是我的CSS代码：
#content #nav a：hover {
color ： 黑色;
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;
}
#nav div是一个菜单列表的项目。
解决方案
据我所知，transition目前在Safari，Chrome， Opera和Internet Explorer 10 +。
这将在这些浏览器中为您产生淡入淡出效果：
div class =snippetdata-lang =jsdata-hide =falsedata-console =truedata-babel =false>
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& ;导航链接< / a>
/ strong>正如Gerald在评论中指出的，如果你把转换放在 a 而不是 a：hover
这可能会派上用场：
I'm trying to make a transition effect with background-color when hovering menu items but it does not work. Here is my CSS code:
#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 #nav div is a menu ul list of items.
解决方案
As far as I know, transitions currently work in Safari, Chrome, Firefox, Opera and 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:hover it will fade back to the original color when your mouse moves away from the link.
This might come in handy, too: CSS Fundamentals: CSS 3 Transitions
这篇关于背景颜色的过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！