elementui 菜单选中优化

/** 父级菜单悬浮样式**/
.el-submenu__title:hover {
  color:#1890ff!important;
}
/** 父级菜单箭头悬浮样式**/
.el-submenu__title:hover>.el-submenu__icon-arrow{
  font-size: 13px!important;

}
/** 子菜单悬浮样式**/
.el-menu-item:hover{
  color:#1890ff!important;
}
/** 菜单选中样式**/
.el-menu-item.is-active{
  background-color: #e6f7ff!important;
}
/** 菜单选中样式添加竖条动效**/
.el-menu-item.is-active:after {
  transform: scaleY(1);
  opacity: 1;
  transition: transform .15s cubic-bezier(.645,.045,.355,1),opacity .15s cubic-bezier(.645,.045,.355,1);
}
/** 菜单高度**/
.el-submenu .el-menu-item {
  height: 45px;
  line-height: 45px;
}
/** 菜单项伪类**/
.el-menu-item:after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  border-right: 3px solid #1890ff;
  transform: scaleY(.0001);
  opacity: 0;
  transition: transform .15s cubic-bezier(.215,.61,.355,1),opacity .15s cubic-bezier(.215,.61,.355,1);
  content: "";
}

文章来源地址https://uudwc.com/A/Ev30D

原文地址:https://blog.csdn.net/huichao199175/article/details/133091830

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请联系站长进行投诉反馈,一经查实,立即删除!

h
上一篇 2023年09月24日 00:19
QT记事本+登陆界面的简单实现
下一篇 2023年09月24日 00:20