- 索引
- 1章：jQuery入門
-
- ├ jQueryのメリット
- ├ readyイベント
- ├ オブジェクトについて
- ├ メソッドについて
- ├ 情報の取得
- ├ イベント(1)
- ├ イベント(2)
- └ 初歩なサンプル
- 2章：jQuery基礎
-
- ├ thisについて(1)
- ├ thisについて(2)
- ├ jQueryとDOM要素
- ├ 簡単な演出
- ├ thisから辿る
- ├ 汎用的なアニメ(1)
- ├ 汎用的なアニメ(2)
- ├ アニメの停止
- ├ アニメを管理する仕組み
- └ 汎用的なアニメ(3)
- 3章：jQuery発展
-
- ├ イベントフロー(1)
- ├ イベントフロー(2)
- ├ イベントフロー(3)
- ├ 画像のプリロード
- ├ jQueryの高速化
- └ メソッドチェーン
- 番外編：研究
-
- ├ イベントを外す
- ├ cssアニメとの連携(1)
- ├ cssアニメとの連携(2)
- ├ cssアニメとの連携(3)
- ├ セレクタの自作(1)
- ├ セレクタの自作(2)
- ├ クロージャ(1)
- ├ クロージャ(2)
- └ クロージャ(3)
hoverイベント
２つのfunctionを設定するイベント
マウスオーバーやマウスアウトに対する処理もjQueryなら簡単に対応できます。ここで紹介する
hoverイベントは以下の構文のようにイベント内にマウスオーバーしたときの処理と、マウスアウトしたときの処理を設定します。事の気注意するのはカンマで２つの処理を区切ることです。忘れがちなので気を付けましょう。
- hoverの構文
- $(セレクタ).hover(マウスオーバーの処理, マウスアウトの処理)
サンプル（02/03_01.html）で機能を確認してみましょう。このサンプルでは構文が確認しやすいようにfunctionをあらかじめ設定しました。
まずは以下のソース8行目を確認して下さい。hoverイベントを利用して、マウスオーバー（領域内にマウスカーソルが入った）時にmouseOverFuncを、マウスアウト（領域外にマウスカーソルが出た）時にmouseOutFuncを実行するように設定しました。
mouseOverFuncは1〜3行目で作成され、2行目では以前も紹介したcssメソッドによって背景色をオレンジ（#F93）変える処理をしています。mouseOutFuncは4〜6行目で作成され、5行目ではcssメソッドによって背景色水色（#09C）変える処理をしています。mouseOverFuncもmouseOutFuncもreadyイベントの外に書きましたが中に書いても機能します。
では実際にサンプルでdiv領域にマウスカーソルを重ねたり外したりしてdivの背景色が変化することを確認して下さい。このようにjQueryではよく利用されるインタラクティブな処理を簡単に実現することができます。
function mouseOverFunc() {
$("div").css("background-color", "#F93");
}
function mouseOutFunc() {
$("div").css("background-color", "#09C");
}
$(function () {
$("div").hover(mouseOverFunc, mouseOutFunc);
});
無名関数を利用したサンプル（02/03_02.html）も用意したので合わせて確認しましょう。１行で書こうとすると見難くなるので、サンプルのように見やすく改行すると良いでしょう。ここでもカンマを忘れがちなので気を付けてください。
$("div").hover(
function () {//---マウスオーバーの処理
$("div").css("background-color", "#F93");
},//---カンマを忘れずに
function () {//---マウスアウトの処理
$("div").css("background-color", "#09C");
}
);
無名関数を利用するとソースが複雑になりますが、トータルで見れば各文字数は少なくなりますし、不用意にfunction名が増えることも防げるので慣れるようにしましょう。
滅多に使わないのです
hoverイベントを利用すれば、ロールオーバーイメージも簡単に作成できますが、このような処理はcssでも可能なので、以外と利用機会はありません。しかしjQueryではイベントの（）内に複数のfunctionが設定できるものがあると覚えておきましょう。次回紹介するtoggleイベントも（）内に複数のfunctionが設定できます。
次のページ：toggleイベント