源代码展示
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>当当网我的订单页</title>
<style>
*{
margin:0px;
padding:0px;
font-size:12px;
}
a{
color:#999;
text-decoration:none;
}
body{
background:#fff url(../images/bg.jpg) no-repeat;
}
ul{
list-style:none;
display:none;
}
.pos{
position:absolute;
}
#menu{
left:590px;
top:5px;
}
#menu li{
display:block;
height:20px;
line-height:20px;
background-color:#fff;
padding:4px;
}
</style>
</head>
<body>
<div id="menu" class="pos">
<a href="#">我的当当</a>
<ul id="menu-ul">
<li><a href="#">我的订单</a></li>
<li><a href="#">我的收藏</a></li>
<li><a href="#">我的礼品卡</a></li>
<li><a href="#">我的积分</a></li>
<li><a href="#">我的余额</a></li>
</ul>
</div>
<script src="js/jquery-1.12.4.js"></script>
<script type="text/javascript" src="js/myDang.js"></script>
</body>
</html>
制作目标
-
当鼠标经过 ‘a’ 标签
“我的当当”
时，使 id为
"menu-ul"
的 ul 列表显示 - 当鼠标移出时，恢复原状
制作步骤
-
创建窗体启动事件
$(document).ready(function () {})
-
利用选择器选中
“我的当当”
标签，创建鼠标经过事件，编写显示代码 - 同理选中标签，创建鼠标移出事件，编写隐藏代码
代码展示
$(document).ready(function () {
$(".pos a").mouseover(function () {
$("#menu-ul").show();//让id为 menu-ul 的标签显示
}).mouseout(function(){
$("#menu-ul").hide();//让id为 menu-ul 的标签隐藏
})
})
版权声明：本文为YuStart原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。