为什么我的悬停菜单背景转换不顺畅？

悬停菜单背景的过渡效果

问题：

尽管使用CSS过渡，菜单项的背景颜色悬停时不会平滑变化。以下是相关的 CSS：

#content #nav a:hover {
    color: black;
    background-color: #AD310B;
    -moz-transition: all 1s ease-in;
    -webkit-transition: all 1s ease-in;
    -o-transition: all 1s ease-in;
    transition: all 1s ease-in;
}

答案：

浏览器支持对于过渡正常运行至关重要。截至撰写本文时，以下版本支持过渡：

• Safari
• Chrome
• Firefox
• Opera
• Internet Explorer 10

要实现所需的淡入淡出效果，请考虑以下事项CSS：

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>

以上是为什么我的悬停菜单背景转换不顺畅？的详细内容。更多信息请关注PHP中文网其他相关文章！