Vue3 + Element Plus侧边栏菜单hover效果无法自定义求助

问题原因 #

你之前的操作无效，是因为Element Plus的菜单hover样式并非直接作用在el-menu元素上，而是绑定在el-menu-item（普通菜单项）和el-sub-menu__title（子菜单标题）这些子元素上；另外如果你的样式加了scoped标识，Vue会给样式添加作用域前缀，导致无法穿透到组件内部的Element Plus元素。

解决方法 #

方法1：使用深度选择器（推荐，适用于scoped样式） #

在组件的<style scoped>标签里，用:deep()穿透作用域，直接指定hover元素的背景色：

/* 普通菜单项的hover效果 */
:deep(.el-menu-item:hover) {
  background-color: #f5f7fa; /* 淡灰色，可根据需求调整色值 */
}

/* 带下拉子菜单的标题hover效果 */
:deep(.el-sub-menu__title:hover) {
  background-color: #f5f7fa;
}

如果担心优先级不够，可以加上!important强制生效：

:deep(.el-menu-item:hover) {
  background-color: #f5f7fa !important;
}

方法2：全局样式修改（适用于全项目统一修改） #

如果希望整个项目的菜单hover效果都改成淡灰色，可在全局样式文件（比如src/style.css）里直接添加样式（不需要scoped）：

.el-menu-item:hover {
  background-color: #f5f7fa;
}
.el-sub-menu__title:hover {
  background-color: #f5f7fa;
}

注意事项 #

• 不要给el-menu设置固定的background-color后忽略子元素的hover样式，确保hover状态的背景色优先级高于默认的菜单背景色。
• 色值可自行调整，比如#eeeeee也是常用的淡灰色选项。

内容的提问来源于stack exchange，提问作者KutayM