f:id:shuzou555:20190923152207p:plain

今回のテーマ：jQueryイベントメソッドmouse〜を使ってみよう

マウスをクリックした時（click）
マウスが要素にかかった時（mouseover）
マウスがそこから離れた時（mouseout）
そしてマウスが動いた時（mousemove）
マウスボタンがはなされた時（mouseup）
マウスボタンが押下された時（mousedown）

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>jQueryの練習</title>
</head>
<body>
    <p>jQueryの練習</p>
    <div id="box" style="width:100px;height:100px;background:purple;"></div>

    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script>
        $(function() {
            // click
            // mouseover, mouseout, mousemove
            $('#box').fadeOut(5000, function() {
                alert("hello");
            });
            $('#box')
                .mouseover(function() {
                    $(this).css('background', 'blue');
                })            
                .mouseout(function() {
                    $(this).css('background', 'yellow');
                })
                .mousemove(function(e) {
                    $(this).text(e.pageX);
                }); 
                /* .mouseup(function(){
                    $(this).css('background-color', 'Red');
                })*/
                //マウスボタンがはなされた時
                /* .mousedown(function(){
                    $(this).css('background-color', 'Blue');
               }) */
                //マウスボタンが押下された時
        });
    </script>
</body>
</html>