AJAXのお勉強

jQuery マウスオーバー・アウト処理＠AJAX

mouseover、mouseoutの処理は、hover()により処理を実装します。

hover(function1,function2)です。
function1：マウスオーバー処理
function2：マウスアウト処理

以下では、ボタンにmouseover・mouseoutの処理を記述しています。
mouseover時に、show()にてdivタグを表示。
mouseout時に、hide()にてdivタグを非表示にしています。


<html>
<head>
<title>Ajax jQuery hover</title>
<script type="text/javascript" src="jquery-1.2.3.js"></script>
<script type="text/javascript">
<!--

$(function(){

    $("#result").hide();

    $("#btn").hover(function(){
                //mouseover
                $("#result").show();
            }, function() {
             //mouseout
                $("#result").hide();
         });
    }
);

// -->
</script>
</head>
<body>

<input type="button" id="btn" value="表示">
<div id="result" style="padding:5px;border-color:#333333;border-width:1px;border-style:solid;height:50px;width:200px;">
マウスオーバー
</div>

</body>
</html>

Copyright (C) 2008 AJAXのお勉強. All Rights Reserved.