hover(over, out)


version 1.0 以降

解説

マウスホバー時のイベントハンドラをバインドします。

マウスカーソルが要素の上に乗った場合(over)、第1引数のイベントハンドラを実行します。 マウスカーソルが要素から外れた場合(out)、第2引数のイベントハンドラを実行します。

*要素内にある別の要素にマウスカーソルが移動しても、第2引数のイベントハンドラは実行しません。

引数

  • over
    Function: マウスカーソルが要素の上に乗った場合に実行するイベントハンドラ関数
  • out
    Function: マウスカーソルが要素から外れた場合に実行するイベントハンドラ関数

戻り値

  • jQuery: jQueryオブジェクト

例1:ボックスにマウスカーソルが入ると、背景色が橙色になります。 マウスカーソルが外れると、元の背景色に戻ります。
また、ボックス内のp要素にマウスカーソルが入っても、マウスカーソルが要素から外れたことにはならず、背景色は元に戻りません。

// マウスホバーイベント
$("#box").hover(
    function(){
        $(this).css("background", "orange");
    },
    function(){
        $(this).css("background", "#6495ed");
    }
);

例1

#box

p要素