jQuery 基礎チュートリアル

jQuery エフェクト

jQuery 操作メソッド

jQuery 過渡

jQuery Ajax

jQuery その他

jQueryのリファレンスマニュアル

jQueryのエフェクトメソッド jQueryのイベント

jQuery hover() メソッド

jQueryのイベント

マウス指が選択された要素にホバーしているときに、hover()メソッドは指定された2つの関数を実行します。

このメソッドは同時にトリガーしますmouseenterおよびmouseleaveイベント。

hover()メソッドを呼び出すのはシンプルです：;$(selector).mouseenter(function_in).mouseleave(function_out)

注意：単一の関数を渡した場合、hover()メソッドはmouseenterおよびmouseleaveイベントに対してその関数を実行します。

文法：

$(selector).hover(function_in, function_out)

例

マウス指が上にホバーしているときに、すべての<p>要素の背景色を変更します：

例

$("p").hover(function(){
　　$(this).css("background-color", "yellow");
　　}, function(){
　　$(this).css("background-color", "lightblue");
});

テストを試してみる‹/›

ホバーする項目をリスト表示するための特別なスタイルを追加します：

例

$(document).ready(function(){
　　$("li").hover(function(){funcIn(this);}, function(){funcOut(this);});
});
function　funcIn(x)　{
　　$(x).html("マウス<b>ENTER</b>　按下イベントがトリガーされます);
　　$(x).css("background", "yellow");
}
function　funcOut(x)　{}}
　　$(x).html("マウス指標の離れをトリガー");
　　$(x).css("background",　"white");
}

テストを試してみる‹/›

もし一つの関数のみを指定した場合、mouseenterおよびmouseleaveイベントの両方に対してその関数が実行されます：

例

$("div").hover(function(){
　　$(this).css("background",　randColor());
});
//　ランダムな色を取得する関数
function　randColor()　{
　　return　'rgb('　+　Math.floor(Math.random()*256)　+　','　+　Math.floor(Math.random()*256)　+　
　　','　+　Math.floor(Math.random()*256)　+　')';
}

テストを試してみる‹/›

引数の値

引数	説明
function_in	要素にマウス指標が近づいたときに実行される機能
function_out	（オプション）要素からマウス指標が離れたときに実行される関数

jQueryのイベント

jQueryのエフェクトメソッド jQueryのイベント