JQuery 制作鼠标经过菜单

本文介绍了一个简单的网页交互案例,通过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 列表显示
  • 当鼠标移出时,恢复原状

制作步骤

  1. 创建窗体启动事件$(document).ready(function () {})
  2. 利用选择器选中 “我的当当” 标签,创建鼠标经过事件,编写显示代码
  3. 同理选中标签,创建鼠标移出事件,编写隐藏代码

代码展示

$(document).ready(function () {
	$(".pos a").mouseover(function () {
		$("#menu-ul").show();//让id为 menu-ul 的标签显示
	}).mouseout(function(){
		$("#menu-ul").hide();//让id为 menu-ul 的标签隐藏
	})
})
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值