Question

单纯用css3 html5实现下拉表单的鼠标经过事件怎么弄

hover对option不起作用，不知道哪里出了问题

Answer 1

HTML5+JavaScript+CSS3实现下拉列表以及折叠功能

[javascript] view plain copy
function show(id){
var d = $('#content'+id).css('display');
if(d == 'block'){
$('#content'+id).css('display','none');
$('#img'+id).attr('src','img/bottom.png');
}else if(d == 'none'){
$('.drop_down_content').each(function(){
$(this).css('display','none');
$('.drop_down_list img').attr('src','img/bottom.png');
});
$('#content'+id).css('display','block');
$('#img'+id).attr('src','img/top.png');
}

[html] view plain copy
<div class="drop_down_list" onclick="show('1');">
<a>svg</a>
<img id="img1" src="img/top.png"/>
</div>
<ul class="drop_down_content" id="content1" style="display:block;">
<li>姓名 <a>李雷</a></li>
</ul>
<div class="drop_down_list" onclick="show('2');">
<a>动画</a>
<img id="img2" src="img/bottom.png"/>
</div>
<ul class="drop_down_content" id="content2" style="display:none;">
<li>父亲 <a>李大宝</a></li>
</ul>

[css] view plain copy
ul{
list-style-type: none;
-webkit-margin-before: 0px;
-webkit-margin-after: 0px;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 0px;
-webkit-padding-after: 0px;
}
.drop_down_list{
width:100%;
height:44px;
border-bottom: 1px solid #D9D9D9;
}
.drop_down_list a{
display: inline-block;
height:44px;
width:100px;
background: url(../img/biaozhu.png) 0px 13px no-repeat;
background-size: 6px 20px;
padding-left: 25px;
padding-top: 12px;
color: #0085d0;
}
.drop_down_list img{
float: right;
height:15px;
margin: 15px 20px;
}
.drop_down_content a{
color: #AAAAAA;
display: inline-block;
float: right;
margin-right: 8%;
}
.drop_down_content li{
height:38px;
width:94%;
color: #353535;
margin-left: 3%;
margin-right: 3%;
padding-top: 15px;
padding-left: 20px;
border-bottom: 1px solid #D9D9D9;
}

追问

省份 北京市
辽宁省

我想给这部分select添加js样式，鼠标经过背景颜色变化，鼠标移出背景颜色变回去，能写个完整的代码吗，不用li标签模拟
如果能写出来提高悬赏