JQuery 制作鼠标经过菜单_制作当当顶部导航制作当当顶部导航鼠标移至“我的当当”上时显示二级菜单,并且-优快云博客

本文链接：https://blog.youkuaiyun.com/YuStart/article/details/116584194

本文介绍了一个简单的网页交互案例，通过HTML、CSS和JavaScript实现了当鼠标悬停在“我的当当”链接上时，显示下拉菜单；鼠标离开时，菜单消失的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

源代码展示

<!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 的标签隐藏
	})
})