如何为菜单背景颜色添加平滑的悬停过渡？-css教程-PHP中文网

如何为菜单背景颜色添加平滑的悬停过渡？

Linda Hamilton

发布： 2024-12-15 22:55:12

原创

260 人浏览过

How Can I Add Smooth Hover Transitions to My Menu Background Colors?

通过过渡向菜单悬停效果添加平滑过渡

您在悬停时转换菜单项的背景颜色时遇到问题，如您的 CSS 代码所示。该问题源于浏览器可能缺乏对过渡的支持。

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

登录后复制

在此修订后的代码中：

我们简化了过渡属性以仅针对背景颜色，从而减少了与其他属性发生冲突的可能性。
我们已用线性替换了 easy-in，这在浏览器之间提供了更一致的过渡效果。

使用此更新的代码，您现在应该将鼠标悬停在支持的浏览器中的菜单链接上时，观察平滑的淡入淡出效果。

以上是如何为菜单背景颜色添加平滑的悬停过渡？的详细内容。更多信息请关注PHP中文网其他相关文章！