elementUI 通过cs悬浮字体及导航栏变色

在使用vue和elementUI简单开发的时候，经常需要在字体或者边栏 悬停时，让字体或者栏背景色变色，从而使用户能清晰的知道目前的浏览的位置
本文以侧边栏目录字体与栏背景变色为例子：
效果如下：

css主要代码：

    & .el-submenu .el-menu-item { //侧边栏的位置
      min-width: $sideBarWidth !important; //侧边栏宽度
      background-color: $subMenuBg !important; //侧边栏背景色

      &:hover {   //重点： 悬停参数
        background-color: $subMenuHover !important;    //backgroud-color表示悬停时 栏背景色的变化
        color: $textHover !important;   //color表示 悬停时 字体颜色的变化
      }
    }

另一个文件引入具体配置：

$textHover:#f4f4f5;
$subMenuBg:#000; //侧边栏子目录背景色
$subMenuHover: #000;//边栏子目录选中颜色
$sideBarWidth: 210px;

:export {
  textHover: $textHover;
  subMenuBg: $subMenuBg;
  subMenuHover: $subMenuHover;
  sideBarWidth: $sideBarWidth;
}