el-menu加hover事件
时间: 2023-11-02 15:00:30 浏览: 345
vue2+el-menu实现路由跳转及当前项的设置方法实例
在el-menu上添加hover事件的方法如下:
给.el-menu-item元素添加:hover选择器,并在其中设置所需的样式即可。例如,可以使用以下代码来改变鼠标悬浮时子菜单的样式:
```
.el-menu-item:hover {
outline: 0 !important;
color: #409EFF !important;
}
```
对于主菜单的样式,可以使用以下代码:
```
.el-submenu__title:hover {
outline: 0 !important;
color: #409EFF !important;
background: none !important;
}
```
如果你想修改菜单的背景色,可以直接在对应元素上设置所需的背景色。例如,要修改主菜单的背景色,可以在.el-menu上直接写入背景色,如下所示:
```
.el-menu {
background-color: #333 !important;
}
```
如果要修改子菜单的背景色,可以使用以下代码:
```
.el-menu-item {
background-color: #333 !important;
}
```
阅读全文