マウスオーバー、マウスアウトを感知する mouseover()・mouseout()

2015年8月3日

マウスオーバー、マウスアウトを感知する
mouseover()・mouseout()

これらの命令は、特定の要素上にマウスが
重なったかを感知し、処理を行います。

mouseover

この命令は、特定の要素上にマウスカーソルが
重なった時に処理を行います。

mouseout

この命令は、特定の要素上にマウスカーソルが
離れた時に処理を行います。

サンプルコードを実行すると、カーソルを
青い箱の上に持っていくと、箱の色が黄色に
変わります。そして、カーソルを黄色の箱の
そとに持っていくと、青い箱に戻るのが
確認できます。

実行結果はこちらです。

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQueryStudy</title>
    <style>
	*{margin:0;padding:0;}
	
    #container{
        width:640px;
        height:400px;
        background-color:white;
        font-weight:100;
        margin:0 auto;}
    #box{
        width:100px;
        height:100px;
        background-color:blue;}

    </style>        
    <script src="js/jquery-1.11.3.js"></script>  
    
</head>
<body>

<div id="container">

    <div id="box"></div>

</div><!--contatiner-->
    

<script>
$(document).ready(function(){
    $("#box").mouseover(function(){
        $(this).css("background-color","yellow");
    });
    $("#box").mouseout(function(){
        $(this).css("background-color","blue");
    });


});
</script>

</body>
</html>

<!doctype html>

<html>

<head>

<title>jQueryStudy</title>

<style>

*{margin:0;padding:0;}

#container{

width:640px;

height:400px;

background-color:white;

font-weight:100;

margin:0 auto;}

#box{

width:100px;

height:100px;

background-color:blue;}

</style>

</head>

<body>

</div>

$(document).ready(function(){

$("#box").mouseover(function(){

$(this).css("background-color","yellow");

});

$("#box").mouseout(function(){

$(this).css("background-color","blue");

});

</script>

</body>

</html>