作品第一课----鼠标移入/移除改变样式 

         
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    div { width: 200px; height: 200px; background-color: #000; color: #FFF; margin: 0 auto; }
    .style { border: 10px solid #000; background-color: red; color: yellow; }

    </style>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
    <div>
        <p>鼠标移入改变样式，鼠标移除恢复。</p>
    </div>
    <script type="text/javascript">
    $(document).ready(function(){
         $("div").hover(
             function(){
                 $(this).addClass("style");
             },
             function(){
                 $(this).removeClass("style");
             }
         );
    });
     
    
    // var handlerInOut = function(){
    //     alert(1)
    // };
    // $('div').bind("mouseenter mouseleave", handlerInOut);
    //$("div").hover(handlerInOut);


    </script>
    
</body>
</html>

 

posted @ 2015-12-23 21:55  Sam的幻想  阅读(257)  评论(0)    收藏  举报