背景色的过渡

286

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;
}

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

css

— 让·吉
source

仅供参考，现在可以在Firefox中使用。在FF9中测试。

— C.Brown

Answers:

526

据我所知，转换目前可以在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>

展开摘要

注意：正如Gerald在评论中所指出的那样，如果您将过渡放在a上a:hover，则当鼠标离开链接时，它而不是过渡将退回到原始颜色。

这也可能派上用场：CSS基础知识：CSS 3过渡

— lium
source

content #nav a当用户将鼠标从链接上移开时，您也可以放入过渡以使其淡出。

— gak 2012年

在jsfiddle.net/K5Qyx上进行悬停和单击过渡的提琴

— Dem Pilafian 2014年

将其放入transition:非悬停会更好吗？我觉得每一次用户悬停，过渡编译..

— 马捷

@Illium Link死了

— Ferdynator

CSS transition似乎无法处理“线性渐变”类型的颜色，可以在此处进行测试。顺便说一句，@ Ilium的答案应被标记为解决方案。

— 15

对我而言，最好将转换代码与原始/最小选择器一起放置，而不是与：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>

展开摘要

— 雷扎·马蒙（Reza Mamun）
source

不是说它是好是坏。只是，如果您在lement本身上指定过渡，则当元素悬停或元素变为“未悬停”时，它将被动画化。如果将其应用于：hover，则在鼠标进入时会显示动画，但在鼠标离开时不会显示动画。

— LucasBeef

这种解决方案总体上更好。过渡效果将并且应该在悬停时淡入，并在模糊时淡出。

— Chizzle