背景颜色的过渡

我试图在hover菜单项时使用背景色进行过渡效果，但不起作用。 这是我的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; } 

#nav div是菜单ul项目列表。

Answer 1

据我所知，目前的转换工作在Safari，Chrome，Firefox，Opera和Internet Explorer 10+。

这应该会在这些浏览器中产生淡化效果：

 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> 

Answer 2

对于我来说，最好将原始/最小select器的转换代码放在：hover或其他附加select器上：

 #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>