背景色的过渡

的CSS CSS

小胖

2020-03-24

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项列表。

第3152篇《背景色的过渡》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共2个回答
Stafan逆天前端 2020.03.24

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

番长 2020.03.24

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

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android