Element中的meau的图标高亮显示

先列出关键代码

.el-submenu__title:hover i{color: white !important;
}

本页全部代码

<script></script><template><div><el-container><!--    侧边栏--><el-aside style="width: 200px;min-height: 100vh;background-color: #001529; border-radius: 4px;">
<!--        这里，min-height: 100vh;可以设置侧边栏的高度，默认是100%，这样可以充满整个页面。,同时，就可以把滚动条去掉--><div style="height: 60px; line-height: 60px; color: white; display: flex; justify-content: center; align-items: center;">logo</div><el-menu active-text-color="white" text-color="rgba(255,255,255,0.65)" background-color="#001529" router style="border: none;" :default-active="$route.path"><el-menu-item index="/"><i class="el-icon-house"></i><span>系统首页</span></el-menu-item><el-menu-item index="/element">element首页</el-menu-item><el-menu-item>系统首页</el-menu-item><el-menu-item>系统首页</el-menu-item><el-submenu><template slot="title"><i class="el-icon-menu"></i><span>系统设置</span></template><el-menu-item>信息管理</el-menu-item><el-menu-item>管理员信息</el-menu-item></el-submenu></el-menu></el-aside><!--    主体内容--><el-container><el-header>头部</el-header><el-main>主体<router-view></router-view></el-main></el-container></el-container></div>
</template>//样式不生效，直接无脑加一个 !important  解决
<style>
.el-menu--inline .el-menu-item{background-color: #000c16 !important;
}
.el-menu-item:hover,.el-submenu__title:hover{color: white !important;
}
.el-submenu__title:hover i{color: white !important;
}
</style>

注意点：

下面的写法只有鼠标放在，图标（i）上门的时候才会显示高亮，这与我们的需求：鼠标移动到一个上的时候，里面的东西全部高亮不是一个效果

.el-submenu__title>i:hover{color: white !important;
}