第4章　「マウスオーバー／アウト／ホバーの処理」

jQueryのイベント処理はイベント名が、そのままメソッド名になっています。マウスオーバー／アウトも同様でmouseover()、mouseout()となります。いずれもパラメータにイベント発生時に処理したい関数を指定します。イベントが発生した場合、関数内ではthisを使ってイベントが発生したエレメントを参照することができます。
サンプル1ではマウスオーバー時に背景色を黄色に、マウスアウト時にエレメントの背景色を白色に設定しています。（サンプル1を実行する）

【HTML】
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>jQuery Sample</title>
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<h1>jQueryサンプル</h1>
<p>イベントの処理</p>
<div>[1] ここをクリック</div>
<div>[2] ここをクリック</div>
<div>[3] ここをクリック</div>
</body>
</html>


【CSS】
h1 {
font-size:14pt;
border-bottom:1px dotted gray;
width:320px;
}


【JavaScript】
$(function(){
$("div").mouseover(function(){
this.style.backgroundColor = "yellow";
});
$("div").mouseout(function(){
this.style.backgroundColor = "white";
});
});


マウスオーバー／アウトによる個別処理ではなく、エレメント上にマウスが重なった／離れた際に自動的に処理を行なわるメソッドがjQueryには用意されています。スタイルシートではhover疑似プロパティが該当しますが、同様のメソッドがjQueryにも用意されています。hover()には2つのパラメータが必要です。どちらのパラメータもイベント発生時に実行する関数を指定します。最初のパラメータがマウスがエレメント上に重なった場合に処理するもの、2番目がエレメントからマウスが離れた場合に処理する関数になります。
サンプル2ではマウスオーバー時にエレメントの背景色を黄色、マウスアウト時には背景色を白色にします。（サンプル2を実行する）

【HTML】
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>jQuery Sample</title>
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<h1>jQueryサンプル</h1>
<p>イベントの処理</p>
<div>[1] ここをクリック</div>
<div>[2] ここをクリック</div>
<div>[3] ここをクリック</div>
</body>
</html>


【CSS】
h1 {
font-size:14pt;
border-bottom:1px dotted gray;
width:320px;
}


【JavaScript】
$(function(){
$("div").hover(
function(){
this.style.backgroundColor = "yellow";
},
function(){
this.style.backgroundColor = "white";
}
);
});

[目次へ]