鼠标移动事件（鼠标移动到主菜单上显示子菜单）

最新推荐文章于 2024-07-17 13:42:21 发布

置顶聆听HJ

最新推荐文章于 2024-07-17 13:42:21 发布

阅读量2.7k

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/weixin_41542329/article/details/103069094

版权

jQuery 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

mouseenter（）：当鼠标指针穿过元素时，会发生 mouseenter 事件。与 mouseover 事件不同，只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素，同样会触发 mouseover 事件。

mouseleave （）：当鼠标指针离开元素时，会发生 mouseleave 事件。与 mouseout 事件不同，只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。如果鼠标指针离开任何子元素，同样会触发 mouseout 事件。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>下拉框效果</title>
<style type="text/css">
	.wrip>ul{
		
		display: none; 
	}

</style>

<script type="text/javascript" src="/3DT/js/jquery-2.1.1.js"></script>
<script type="text/javascript">
	$(function(){
		var $li=$(".wrip");
		$li.mouseenter(function(){
			$(this).children("ul").show();
			
		})
		
		$li.mouseleave(function(){
			$(this).children("ul").hide();
			
		})
	});
</script>
</head>
<body>

		<ul>
			<li class="wrip">一级菜单01
				<ul>
					<li>子菜单11</li>
					<li>子菜单12</li>
					<li>子菜单13</li>
					<li>子菜单14</li>
				</ul>
			</li>
			<li class="wrip">一级菜单02
				<ul>
					<li>子菜单11</li>
					<li>子菜单12</li>
					<li>子菜单13</li>
					<li>子菜单14</li>
				</ul>
			</li>
		</ul>
		

	
	
</body>
</html>

效果图：