一、事件监听方法
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>