jquery 事件监听方法

一、事件监听方法

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>