jquery实现鼠标滑过div出现二级菜单
<!DOCTYPE html>
<html>
<head>
<title>二级菜单鼠标事件</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.container{
width: 100px;
height: 40px;
border: 1px solid #ff4433;
}
.fruits{
width: 100px;
height: auto;
display: none;
}
.fruits>ul{
list-style: none;
}
.fruits>ul>li{
width: 100%;
border: 1px solid #000000;
}
</style>
</head>
<body>
<div class="container" id="Obj">水果</div>
<div class="fruits" id="Obj1">
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>菠萝</li>
<li>西瓜</li>
<li>李子</li>
<li>柠檬</li>
</ul>
</div>
<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript">
$(function(){
moveEvent();
})
function moveEvent(){
$("#Obj,#Obj1").mousemove(function(){
$("#Obj1").css("display","block");
})
$("#Obj,#Obj1").mouseleave(function(){
$("#Obj1").css("display","none");
})
}
</script>
</body>
</html>
网友评论