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

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

}

拖拽发生过程

被拖拽元素

dragstart按下鼠标键并开始移动鼠标时

drag在dragstart事件之后，在元素被拖动期间会持续触发该事件

dragend当拖动停止时，会触发dragend事件

放置目标元素

dragenter有元素被拖动到放置目标上

dragover紧随dragenter发生，在被拖动的元素

还在放置目标范围内移动时，会持续触发该事件

dragleave在元素被拖出放置目标时触发

drop元素被放到了放置目标中触发

注释：拖拽发生过程：dragstart->drag->dragenter->dragover->dragleave/drop->dragend

1）、普通下拉列表菜单

html代码如下：

<form action="" method="get"> 

<label>1、普通下拉列表菜单</label> 

<select name=""> 

<option value="0">DIVCSS5</option> 

<option value="1">DIVCSS5</option> 

</select> 

</form> 

2）、跳转下拉列表菜单（如常见点击后跳转到选择网站）

常常一些网站做友情链接，与部门之间使用select下拉标签实现网址跳转。下面我们通过代码与案例接受select跳转菜单应用。

跳转菜单html代码如下：

<form action="" method="get"> 

<label>2、跳转的下拉列表菜单</label> 

<select name="jumpMenu" id="jumpMenu"

 onchange="MM_jumpMenu('parent',this,0)"> 

<option value="http://www.Rothur.com/">Rothur</option> 

<option value="http://www.Rothur.com/">Rothur</option> 

</select> 

</form> 

实现跳转还需要在head标签内加入Js脚本动作代码：

<script type="text/javascript"> <!-- function MM_jumpMenu(targ,selObj,restore){ //v3.0 eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'") if (restore) selObj.selectedIndex=0 } //--> </script>

---