修改el-menu样式

最新推荐文章于 2024-03-06 15:29:51 发布

原创最新推荐文章于 2024-03-06 15:29:51 发布 · 2.3k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #javascript

本文介绍了如何修改EleUI中的el-menu组件的默认样式，包括取消一级菜单选中时的边框、背景，二级菜单hover效果以及选中后鼠标移开的样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

修改 el-menu 中部分默认样式

  //设置当前被选中的一级菜单
  .el-menu-item.is-active {
    border: 0;
    background: unset;
  }
  //设置菜单鼠标经过的样式
  .el-menu-item:hover {
    background: unset;
  }
  //设置二级菜单被选中的菜单
  .el-sub-menu.is-active {
    border: unset;
    background: unset;
  }
  //设置二级菜单鼠标经过的样式
   .el-sub-menu__title:hover {
    background: unset;
    border: unset !important;
  }
  //设置选中之后鼠标移开的背景颜色
  .el-tooltip__trigger {
    border: unset !important;
  }