jquery mouseleaveメソッド

TOPページに戻る > jquery入門

jquery mouseleave()メソッド

mouseleaveメソッドは、セレクタで指定した要素からマウスがはずれたときに実行されるメソッドです
mouseoutメソッドとは違い指定した要素の子要素からマウスがはずれた場合は何もおこりません。mouseoutメソッドは子要素からマウスがはずれても再び処理を発動します

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

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

セレクタで指定したHTML要素にマウスアウトしたときに実行したそれぞれの処理回数を表示します。子要素にロールアウトしたときの違いを確かめてください。
最初にfooとfoo2の変数を作ります。#hogeにロールアウトしたときにmouseleave()とmouseleave()の処理を入れます。 ++fooはインクリメントといって数を1だけ変数にプラスします

jquery

$(function() {
var foo=0;
var foo2=0;

	$("#hoge").mouseleave(function(){
	$("#hoge3").text('mouseleaveを発動した回数'+ ++foo);
	})
	.mouseout(function(){
	$("#hoge4").text('mouseoutを発動した回数'+ ++foo2);
	})
});

css

#hoge{
 border: solid 1px;
 padding: 50px;
  }
#hoge2{
 border: solid 1px;
 padding: 20px;
  }

html

<div id="hoge">マウスを乗っけてください
<div id="hoge2">子要素</div>
<span id="hoge3">mouseleaveを発動した回数</span><br>
<span id="hoge4">mouseoutを発動した回数</span>
</div>

実行後