如何在菜单悬停时平滑过渡背景颜色？-css教程-PHP中文网

如何在菜单悬停时平滑过渡背景颜色？

Susan Sarandon

发布： 2024-12-05 20:06:18

原创

776 人浏览过

How to Smoothly Transition Background Colors on Menu Hover?

如何为菜单悬停实现平滑的背景颜色过渡

实现悬停时背景颜色的过渡效果是常见的样式要求，但有时也会带来挑战。在这里，我们探索解决这个问题的方法。

原始代码

提供的 CSS 代码尝试实现背景颜色过渡，但遇到问题：

#content #nav a:hover {
    color: black;
    background-color: #AD310B;
    /* Transition properties */
}

登录后复制

解决方案

要启用过渡，您需要确保跨各种浏览器的支持。以下更新的代码应提供所需的淡入淡出效果：

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

登录后复制

说明

-webkit-transition 和 -ms-transition 提供特定于浏览器的支持分别用于 Safari 和 Internet Explorer 中的过渡。
transition 是支持现代的标准过渡属性浏览器。

示例

<a>Navigation Link</a>

登录后复制

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