jquery mouseoutメソッド

TOPページに戻る > jquery入門

スポンサード リンク

jquery mouseout()メソッド

mouseoutメソッドは、セレクタで指定した要素からマウスが外れたときに実行されるメソッドです
ロールアウトのとき実行されるメソッドです

$("セレクタ").mouseout(function(){
	マウスアウトしたときの処理
});

指定したHTML要素をマウスアウトしたときにイベントを実行する

セレクタで指定したHTML要素にマウスアウトしたときにテキストが切り替わります
ロールアウトとロールオーバーの処理を組み合わせてみました。

jquery

$(function() {
	$("span#hoge").mouseout(function(){
	$("span#hoge2").text("ロールアウト(マウス外れてる)");
	});
	$("span#hoge").mouseover(function(){
	$("span#hoge2").text("ロールオーバー(マウス乗っかってる)");
	});
});
css
#hoge{ border: solid 1px; }

html

<span id="hoge">マウスが乗っかってないときに表示されます</span>
<span id="hoge2">テキスト</span>

実行後

ロールアウト テキスト


指定した要素にマウスを合わせるとテキストが切り替わります

メソッドチェーン

メソッドチェーンを使うとより効率的なコードが書けます
上のコードはspan#hogeを2回探しに行きましたがメソッドチェーンを使うと1回で済みます
同じ要素に適用する処理をドットで連結させます。.mouseoverの前のセレクタを省略して、.mouseoutの前に記述したセレクタをmouseoverのときにも利用しています。コードが短くなるだけでなく処理スピードも速くなります

jquery

$(function() {
	$("span#hoge3").mouseout(function(){
	$("span#hoge4").text("ロールアウト(マウス外れてる)");
	})
	.mouseover(function(){
	$("span#hoge4").text("ロールオーバー(マウス乗っかってる)");
	});
});

html

<span id="hoge3">マウスが乗っかってないときに表示されます</span>
<span id="hoge4">テキスト</span>

実行後

ロールアウト テキスト






(C)2012 ホームページ作成無料