一、事件监听方法
mouseover() 鼠标移入事件方法
mouseout() 鼠标移出事件方法
mouseenter() 鼠标移入事件方法
mouseleave() 鼠标移出事件方法
focus() 获得焦点
blur() 失去焦点
二、hover()方法
【语法1】：
hover(function(){ ???鼠标移入执行的代码},function(){ ???鼠标移出执行的代码});【语法2】：
hover(function(){ ??移入移出两个事件执行的代码});参数解释：
1 .hover(参数1,参数2);
2.参数1和参数2是匿名函数function(){}，如果只写一个参数，表示鼠标移入和移出两个事件
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<meta name="viewport" content="width=device-width, initial-scale=1.0"> ???<meta http-equiv="X-UA-Compatible" content="ie=edge"> ???<title>Document</title> ???<style type="text/css"> ????*{ ????????margin:0; ????????padding:0; ????} ????.con{width:400px; margin:100px auto;} ????.con ul{ ????????list-style: none; ????} ????.con ul li{ ????????float:left; ????????width:100px; ????????height:30px; ????????position:relative; ????} ????.con ul li a{ ????????background: #ccc; ????????display: block; ????????width:100px; ????????height:30px; ????????color:#fff; ????????font-size:12px; ????????line-height: 30px; ????????text-align:center; ????????text-decoration: none; ????} ????.con ul li a:hover{ ????????background:pink; ????} ????.con ul ul{ ????????position:absolute; ????????top:30px; ????????left:0; ????????display: none; ????} ???</style></head><body> ???<div class="con"> ???????<ul> ???????????<li> ???????????????<a href="##">项目内容1</a> ???????????????<ul> ???????????????????<li><a href="##">内容内容</a></li> ???????????????????<li><a href="##">内容内容</a></li> ???????????????????<li><a href="##">内容内容</a></li> ???????????????</ul> ???????????</li> ???????????<li> ???????????????<a href="##">项目内容2</a> ???????????????<ul> ???????????????????<li><a href="##">内容内容</a></li> ???????????????????<li><a href="##">内容内容</a></li> ???????????????????<li><a href="##">内容内容</a></li> ???????????????</ul> ???????????</li> ???????????<li> ???????????????<a href="##">项目内容3</a> ???????????????<ul> ???????????????????<li><a href="##">内容内容</a></li> ???????????????????<li><a href="##">内容内容</a></li> ???????????????????<li><a href="##">内容内容</a></li> ???????????????</ul> ???????????</li> ???????????<li> ???????????????<a href="##">项目内容4</a> ???????????????<ul> ???????????????????<li><a href="##">内容内容</a></li> ???????????????????<li><a href="##">内容内容</a></li> ???????????????????<li><a href="##">内容内容</a></li> ???????????????</ul> ???????????</li> ???????</ul> ???</div></body></html><script src="js/jquery-1.12.4.min.js"></script><script type="text/javascript">// $(‘.con>ul>li‘).hover(function(){ ???//鼠标移入，向下滑动显示// ?if($(this).children(‘ul‘).is(":animated")){// ??????return;// ????????}// ??$(this).children(‘ul‘).slideDown();// },function(){ ???//鼠标移出，向上滑动隐藏// ????$(this).children(‘ul‘).slideUp();// }) ?$(‘.con>ul>li‘).hover(function(){ ?????$(this).children(‘ul‘).stop(true).slideToggle(); ?})</script>jquery 事件监听方法
原文地址：http://www.cnblogs.com/smivico/p/7831849.html