关于select下拉框鼠标经过时改变背景颜色

关于select下拉框⿏标经过时改变背景颜⾊下拉我们通常想到select但是当hover时需要改变option的背景颜⾊时，却不能使⽤select标签。

此时要⽤ul代替
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.shenyong{
float: left;
height:32px;
line-height: 32px;
margin-right: 5px;
}
#select {
width: 100px;
height:32px;
line-height: 32px;
background:rgba(255,255,255,1);
border-radius:4px;
border:1px solid #C0C4CC;
font-size: 12px;
float: left;
}
.select-head {
overflow: hidden;
width: 100%;
height: 24px;
box-sizing: border-box;
padding-left: 5px;
line-height: 24px;
position: relative;
line-height: 24px;
}
.select-head .select-head-cont {
float: left;
}
.select-head .select-icon {
float: right;
margin-right: 10px;
margin-top:5px;
}
.option {
line-height: 32px;
background:rgba(255,255,255,1);
border-radius:4px;
border:1px solid #C0C4CC;
margin-top: 10px;
display: none;
}
.option .option-item {
height:26px;
line-height: 26px;
font-size:12px;
}
.option-item:hover {
background:rgba(58,137,132,1) !important;
color: #fff !important;
}
</style>
<div>
<div class="shenyong">申佣状态</div>
<ul id="select">
<li>
<div class="select-head">
<span class="select-head-cont"></span>
<span class="glyphicon glyphicon-triangle-bottom select-icon"></span>
</div>
<ul class="option">
<li class="option-item" >全部</li>
<li class="option-item">未申佣</li>
<li class="option-item">部分申佣</li>
<li class="option-item">全部申佣</li>
</ul>
</li>
</ul>
</div>
<script type="text/javascript">
$(function() {
var selectHeadCont = document.getElementsByClassName('select-head-cont'); var optionItem = document.getElementsByClassName('option-item');
/*默认是第⼀个选项*/
selectHeadCont[0].innerHTML = optionItem[0].innerHTML;
optionItem[0].setAttribute('style', 'background: rgba(58,137,132,1); color:#fff');
/*点击选项后出现在下拉框*/
var len = optionItem.length;
for(var i = 0; i < len; i++) {
optionItem[i].index = i;
optionItem[i].addEventListener('click', function() {
selectHeadCont[0].innerHTML = optionItem[this.index].innerHTML;
// 初始化所有optionItem背景样式
for(var k = 0; k < len; k++) {
optionItem[k].setAttribute('style', 'background: #fff; color:#333333');
}
// 给选中的optionItem添加背景样式
optionItem[this.index].setAttribute('style', 'background: rgba(58,137,132,1) color:#fff'); $('.option').css('display', 'none');
}, false);
}
// 阻⽌冒泡事件发⽣
function stopPropagation(e) {
if(e.stopPropagation)
e.stopPropagation(); //停⽌冒泡⾮ie
else
e.cancelBubble = true; //停⽌冒泡 ie
}
// 点击select-head时，select出现
$('.select-head').on('click', function(e) {
$('.option').css('display', 'block');
stopPropagation(e);
})
// 点击其他地⽅时，select会收起来
$(document).on('click', function(event) {
$('.option').css('display', 'none');
})
})
</script>。