单纯用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

---