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

1,给下拉框添加背景色

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

效果图:

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

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

.el-select-dropdown__item.hover, .el-select-dropdown__item:hover{
  background-color: #fff;
}
.el-select-dropdown__item.selected,.el-select-dropdown__item:hover{
  color: #fff;
  background: #409EFF;
}
1
2
3
4
5
6
7

解决后的效果图:

诺,现在可以了,正常了.
上下两块样式对比,就多了一个**.hover**,这个是给hover状态加了一个hover的类,并不是hover的状态,.hover不等于**:hover**,f12复制类名的时候注意一下就可以了,官网上也是这样的,.hover和:hover在一个类里面,很容易出现问题.
碰到了这个问题.记录一下.