div 模拟select

来源:互联网 发布:手机后期ps软件 编辑:程序博客网 时间:2024/09/21 08:57
                    <div class="area_select_pick" id="area_select" >
                    <div class="area_select_icon">
                        <img src="images/icon_arrow_white.png" class="area_arrow"/>
                        </div>
                        <ul class="area_select_ul"  onMouseOut="hide_select()" >
                        <li class="first" onMouseOver="over(this)" onMouseOut="out(this)">大陆</li>
                            <li class="first" onMouseOver="over(this)" onMouseOut="out(this)">香港</li>
                            <li class="first" onMouseOver="over(this)" onMouseOut="out(this)">台湾</li>
                        </ul>
                    </div>

.area_select_pick{width:138px;position:absolute;margin-top:22px;display:none;}
.area_select_icon{height:7px;width:138px;}
.area_arrow{margin-left:65px;}
.area_select_ul{width:138px;height:auto; background-color:#ffffff;margin-top:12px;line-height:26px;font-size:14px;color:#363636;}


$(".area_select_input").click(function(){
$("#area_select").show();
});
$(".first").click(function(){
var optionval=$(this).html();
$(this).parent().parent().parent().find(".area_select_input").html(optionval);
$(".area_select_pick").hide();
});

      function over(obj){
obj.style.background="#9c8906";
}
function out(obj){
obj.style.background="#ffffff";
}

0 0
原创粉丝点击