背景颜色的过渡 [英] Transition of background-color

问题描述

我试图使用背景颜色，当悬停菜单项时，但它不工作的过渡效果。这是我的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



这可能会派上用场：CSS基础知识：CSS 3转换

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

这篇关于背景颜色的过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！