修改el-menu主菜单和子菜单悬浮的背景色

最新推荐文章于 2026-03-05 00:25:28 发布

原创最新推荐文章于 2026-03-05 00:25:28 发布 · 1.4w 阅读

15 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#前端 #html5

收录于

element-ui 专栏收录该内容

30 篇文章

订阅专栏

本文详细介绍了如何修改EleUI中菜单项hover效果及选中状态的样式，包括颜色和背景渐变，提升用户体验。

/deep/.el-menu .el-menu-item:hover{
    outline: 0 !important;
    color: #2E95FB !important;
    background: linear-gradient(270deg, #F2F7FC 0%, #FEFEFE 100%)!important;
}
/deep/.el-menu .el-menu-item.is-active {
    color: #2E95FB !important;
    background: linear-gradient(270deg, #F2F7FC 0%, #FEFEFE 100%)!important;
}
.el-submenu /deep/.el-submenu__title:hover {
  color: #2E95FB !important;
  background: linear-gradient(270deg, #F2F7FC 0%, #FEFEFE 100%)!important;
}