Element中的meau的图标高亮显示

Gin3872025-03-24 10:12

先列出关键代码

html 复制代码

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

本页全部代码

html 复制代码

<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）上门的时候才会显示高亮，这与我们的需求：鼠标移动到一个上的时候，里面的东西全部高亮不是一个效果

html 复制代码

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