python前端基础--jquery鼠标事件

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
       <script>
           $(function(){
               // 鼠标进入事件
//                $('button').mouseenter(function(){
//                    // $('#box').fadeOut(3000);
//                    $('#box').hide(3000);
//                    $('p').animate({fontSize:'10px'},"slow")
//                });

               // 鼠标离开事件
//                $('button').mouseleave(function(){
//                    // $('#box').fadeOut(3000);
//                    $('#box').hide(3000);
//                    $('p').animate({fontSize:'10px'},"slow")
//                });

               // 鼠标按下事件
//                $('button').mousedown(function(){
//                    // $('#box').fadeOut(3000);
//                    $('#box').hide(3000);
//                    $('p').animate({fontSize:'10px'},"fast")
//                });

               // 鼠标点击后松开事件
               $('button').mouseup(function(){
                   // $('#box').fadeOut(3000);
                   $('#box').hide(3000);
                   $('p').animate({fontSize:'10px'},"fast")
               });

               //鼠标悬停事件
               $('button').hover(function(){
                   // $('#box').fadeOut(3000);
                   $('#box').hide(3000);
                   $('p').animate({fontSize:'10px'},"fast")
               });
           });
       </script>
       <style>
           #box{
               width: 430px;
               height: 200px;
               background: #00BFFF;
           }
           p{
               font-size: 20px;
               font-weight: bold;
               color: red;
               line-height: 200px;
               text-align: center;
           }
       </style>
   </head>
   <body>
       <button>鼠标指向我看看</button>
       <div id="box">
           <p>当你把鼠标指向按钮时，便是咱们再见时~~~</p>
       </div>
   </body>
</html>

python前端基础--jquery鼠标事件

猜你喜欢