jQuery リファレンス

Tweet

mouseleave()は要素の内側からマウスカーソルが出た際に発火するイベントです。

JavaScriptのmouseleaveイベントはIEのみで利用できるイベントですが、jQueryのイベントは全てのブラウザで利用できます。mouseleave()とmouseout()の違いは、mouseout()はイベントを指定した要素の子要素から出た際にもイベントが発火しますが、mouseleave()は指定した要素から出た場合のみイベントが発火します。

次のコードでは.targetからマウスカーソルが離れた際に背景を赤色に変更します。

$(".target").mouseleave(function(){
	$(this).css("background","red");
});

また、mouseleave時にイベントデータを引き渡すことが可能です。

$(".target").mouseenter("ok",function(e){
	$(this).text(e.data);
});

この場合.targetからマウスカーソルをはずすテキストが「ok」に変更されます。

引数に何も指定しないことで設定しておいたmouseleaveイベントを発火させる事も可能です。

 $(".target").mouseleave(function(){
	$(this).css("background","red");
});
$("button").click(function(){
	$(".target").mouseleave();
});

この場合はボタンをクリックした際も.targetのmouseleaveイベントが動作します。

mouseleave()はjQuery 1.0で定義されたメソッドです。

jQuery 1.4.3よりイベントデータを扱うことが可能になりました。

参考URL

.mouseleave() | jQuery API Documentation

登録日 : 2013年06月16日 最終更新日 : 2013年6月16日

同じカテゴリー(Events)のエントリー

• change()
• blur()
• unload()
• unbind()
• submit()
• select()
• scroll()
• mouseleave()
• mouseenter()
• keyup()
• keypress()
• keydown()
• focusout()
• focusin()
• focus()
• die()
• delegate()
• dblclick()
• bind()
• undelegate()
• error()
• off()
• resize()
• mouseup()
• mousemove()
• mousedown()
• mouseout()
• mouseover()
• click()
• on()
• load()
• ready()