element的el-select给下拉框添加背景以及鼠标离开背景色不消失问题

1,给下拉框添加背景色

// 下拉框内容背景色
.el-select-dropdown__item.selected,.el-select-dropdown__item:hover,.el-select-dropdown__item.hover{
  color: #fff;
  background: #409EFF;
}

效果图:

ok,有效果了.
2,解决添加背景鼠标移出去背景不消失问题,
当我鼠标移出下拉框的时候,看效果:

看,鼠标移出下拉框了,hover的背景色并没有消失**(看框里面,我没点击选择,都是hover状态)**,点击选择了一条数据那背景色肯定不会消失.
原因很简单,就是修改样式的时候多加了一个类名.改成下面就可以了

.el-select-dropdown__item.selected,.el-select-dropdown__item:hover{
  color: #fff;
  background: #409EFF;
}

解决后的效果图:

诺,现在可以了,正常了.
上下两块样式对比,就多了一个**.hover**,这个是给hover状态加了一个hover的类,并不是hover的状态,.hover不等于**:hover**,f12复制类名的时候注意一下就可以了,官网上也是这样的,.hover和:hover在一个类里面,很容易出现问题.
碰到了这个问题.记录一下.
没了，结束了，是不是很简单呐，如有错误，欢迎留言.如有问题，不吝赐教。
如果此篇博文对您有帮助，还请动动小手点赞 收藏 ⭐留言 呐~，谢谢 ~ ~