标签:
html
<div id="city"> <p class="title">查找新世界城市活动信息</p> <p>每个城市的有不同的活动信息,请自主查询您所需要了解的城市</p> <form action="" method="post"> <div class="country"> <ul> <li class="active">中国</li> <li>美国</li> <li>英国</li> <li>法国</li> </ul> </div> <div class="status"> <ul> <li class="active">省份</li> <li>北京</li> <li>广东</li> <li>贵州</li> </ul> </div> <div class="city"> <ul> <li class="active">城市</li> <li>杭州</li> <li>苏州</li> <li>兰州</li> </ul> </div> <input type="submit" value="搜   索"/> </form> </div>
css
#city{ height: 340px; background: url(../img/img_30.png) no-repeat top left; padding-top: 52px; } #city .title{ font-size: 21px; opacity: 1; -line-height: 40px; } #city .title:after{ content: "——"; display: block; -line-height: 40px; } #city p{ color: #FFFFFF; font-family: "microsoft yahei"; text-align: center; opacity: 0.8; } #city form{ width: 100%; height: 168px; margin-top: 52px; padding: 0 0 0 126px; } #city form div, #city form input{ width: 236px; height: 34px; float: left; } #city form div{ margin-right: 28px; border: none; color: #a8aaaa; font-size: 12px; background-color: #FFFFFF; } #city form div:hover{ border: 1px solid #E74F4D; } #city form ul li{ width: 236px; height: 34px; line-height: 34px; font-size: 12px; color: #323333; opacity: 0.7; display: none; background-color: #e3e3e5; text-indent: 12px; font-size: 12px; color: #323333; } #city form ul li.active{ display: block; background: url(../img/images/task_1_7_1_03.png) no-repeat; background-position: 95% 50%; opacity: 1; background-color: white; } #city form ul li:hover{ background-color: #E74F4D; color: #FFFFFF; } #city form input{ background-color: #E74F4D; border: none; font-size: 14px; color: white; font-family: "microsoft yahei"; }
框架样式如下
比默认的样式好看吧?
为了完全实现select的效果,需要用到jq+事件委托:
jq
$(document).ready(function(){ var oCityDiv = $("#city").find("div"); oCityDiv.mouseover(function(ev){ var ev = ev || window.event; var target = ev.target || ev.srcElement; var _this = $(this);//养成良好习惯,区分this的对象 if(target.nodeName.toLowerCase() == ‘li‘){ _this.find(‘li‘).css(‘display‘,‘block‘); _this.find(‘li‘).click(function(){ var _li = $(this); var iCur = _li.text(); _this.find(‘.active‘).text(iCur); }); } _this.mouseout(function(ev){ var ev = ev || window.event; var target = ev.target || ev.srcElement; if(target.nodeName.toLowerCase() == ‘li‘){ _this.find(‘li‘).not(‘.active‘).css(‘display‘,‘none‘); } }); }); });
修改option的宽高无效,用div+ul做select下拉菜单
标签:
原文地址:http://www.cnblogs.com/finn-Reo/p/5901118.html