jQuery リファレンス：mouseout

索引

Core：コアとなる仕組み

Selectors：セレクタ

└ 目次
基礎
├ *（すべて）
├ element（html要素）
├ #id名（ID属性）
├ .class名（clas属性）
├ 複数のセレクタ(and)
└ 複数のセレクタ(or)
階層関連
├ 先祖子孫
├ >（子要素）
├ +（直近の後要素）
└ ~（後要素）
属性
├ [属性名]
├ [属性名='値']
├ [属性名!='値']
├ [属性名^='値']
├ [属性名$='値']
├ [属性名*='値']
├ [属性名-='値']
├ [属性名|='値']
└ 複数の属性
基本フィルタ
├ :root
├ :header
├ :lang()
├ :target
├ :animated
├ :first
├ :last
├ :even
├ :odd
├ :eq()
├ :gt()
├ :lt()
└ :not()
子要素フィルタ
├ :first-child
├ :first-of-type
├ :last-child
├ :last-of-type
├ :only-child
├ :only-of-type
├ :nth-child()
├ :nth-of-type()
├ :nth-last-child()
└ :nth-last-of-type()
可視性フィルタ
├ :hidden
└ :visible
コンテンツフィルタ
├ :contains()
├ :has()
├ :empty
└ :parent
フォーム
├ :checked
├ :selected
├ :disabled
├ :enabled
├ :focus
├ :button
├ :checkbox
├ :file
├ :image
├ :input
├ :password
├ :radio
├ :reset
├ :submit
└ :text

Attributes：属性

Traversing：対象の変更

└ 目次
ツリー（階層）
├ .siblings()
├ .next()
├ .nextAll()
├ .nextUntil()
├ .prev()
├ .prevAll()
├ .prevUntil()
├ .children()
├ .find()
├ .parent()
├ .parents()
├ .parentsUntil()
├ .offsetParent()
└ .closest()
フィルタリング
├ .eq()
├ .slice()
├ .first()
├ .last()
├ .filter()
├ .has()
├ .not()
├ .is()
└ .map()
その他
├ .add()
├ .andSelf()
├ .addBack()
├ .end()
├ .contents()
└ .each()

Manipulation：操作

├ 目次
要素の挿入
├ .after()
├ .before()
├ .append()
├ .prepend()
├ .insertAfter()
├ .insertBefore()
├ .appendTo()
└ .prependTo()
要素の削除
├ .empty()
└ .remove()
├ .detach()
要素を囲む
├ .wrap()
├ .wrapAll()
└ .wrapInner()
├ .unwrap()
その他
├ .text()
├ .html()
├ .clone()
├ .replaceAll()
└ .replaceWith()
他ページ参照
├ .toggleClass()
├ .hasClass()
├ .addClass()
├ .removeClass()
├ .attr()
├ .removeAttr()
├ .prop()
├ .removeProp()
├ .val()
├ .css()
├ .offset()
├ .position()
├ .height()
├ .innerHeight()
├ .outerHeight()
├ .width()
├ .innerWidth()
├ .outerWidth()
├ .scrollLeft()
└ .scrollTop()

CSS：スタイルシート

Events：イベント

└ 目次
マウスイベント
├ .click()
├ .dblclick()
├ .mousedown()
├ .mouseup()
├ .mouseover()
├ .mouseout()
├ .mouseenter()
├ .mouseleave()
├ .mousemove()
├ .hover()
└ .toggle()
キーイベント
├ .keydown()
├ .keypress()
├ .keyup()
├ .focusin()
└ .focusout()
フォームイベント
├ .focus()
├ .blur()
├ .change()
├ .select()
└ .submit()
ブラウザイベント
├ .resize()
├ .scroll()
└ .error()
ロードイベント
├ .load()
├ .unload()
└ .ready()
イベントハンドラアタッチ
├ .bind()
├ .unbind()
├ .live()
├ .die()
├ .delegate()
├ .undelegate()
├ .on()
├ .off()
├ .one()
├ .triggerHandler()
└ .trigger()
イベントオブジェクト
├ jQuery.Event
├ eo.type
├ eo.data
├ eo.pageX
├ eo.pageY
├ eo.timeStamp
├ eo.which
├ eo.result
├ eo.namespace
├ eo.target
├ eo.currentTarget
├ eo.delegateTarget
├ eo.relatedTarget
├ eo.stopPropagation()
├ eo.stopImmediateP...
├ eo.preventDefault()
├ eo.isPropagationSt...
├ eo.isImmediatePre...
└ eo.isDefaultPreven...

Effects：演出効果

└ 目次
基礎
├ .hide()
├ .show()
└ .toggle()
スライド
├ .slideUp()
├ .slideDown()
└ .slideToggle()
フェード
├ .fadeOut()
├ .fadeIn()
├ .fadeTo()
└ .fadeToggle()
カスタム
├ .animate(prop)
├ .animate(prop,opt...
├ .stop()
├ .delay()
├ .queue()
├ .dequeue()
├ .clearQueue()
├ .finish()
├ jQuery.queue()
├ jQuery.dequeue()
├ jQuery.fx.interval
└ jQuery.fx.off

Ajax：xml等との連携

└ 目次
簡易メソッド
├ .load()
├ jQuery.get()
├ jQuery.getJSON()
├ jQuery.getScript()
└ jQuery.post()
グローバルイベントハンドラ
├ .ajaxComplete()
├ .ajaxSuccess()
├ .ajaxError()
├ .ajaxSend()
├ .ajaxStart()
└ .ajaxStop()
低レベル・インターフェイス
├ jQuery.ajax()
├ jQuery.ajaxSetup()
└ jQuery.ajaxPrefilt...
お助け機能
├ jQuery.param()
├ .serialize()
└ .serializeArray()

Utilities：ユーティリティ

Data：データ

Miscellaneous：諸々

├ 目次
├ .index()
├ .get()
├ .toArray()
├ .length
└ .size()

Deferred：処理管理

└ 目次
deferredの作成
└ jQuery.deferred()
promiseの作成
├ jQuery.when()
├ .promise()
└ deferred.promise()
コールバックの設定
├ deferred.done()
├ deferred.fail()
├ deferred.always()
├ deferred.progress()
├ deferred.then()
└ deferred.pipe()
状態の取得
├ deferred.state()
├ deferred.isReso...
└ deferred.isReje...
状態の変更
├ deferred.resolve()
├ deferred.resolveW...
├ deferred.reject()
├ deferred.rejectW...
├ deferred.notify()
└ deferred.notifyW...

Callbacks：コールバック

Internals：内部処理

.mouseout( )マウスカーソルが要素内（子孫要素を含む）から出た時の処理を設定

構文

マウスカーソルが要素内（子孫要素を含む）から出た時の処理を設定返値：jQueryオブジェクト: jQo.mouseout( function )ver1.0〜
jQo.mouseout( )ver1.0〜
jQo.mouseout( object, function )ver1.4.3〜

機能

jQueryオブジェクトで指定した要素内からマウスカーソルが出た時に引数のfunctionを実行します。引数にfunctionを設定しない場合は、要素に設定（バインド）されたfunctionを実行します。

ver1.4.3からは引数にobjectオブジェクトを設定することで、実行するfunctionにデータを渡すことができます（データはイベントオブジェクトのdataプロパティ経由で渡されます）。

指定した要素内に子孫要素がある場合、子孫要素からマウスカーソルが出た際にもfunctionが実行されることに注意してください。子孫要素に反応させたくない場合はmouseleaveメソッドを利用してください。

※以降「マウスカーソルが要素内（子孫要素を含む）から出た」動作のことをマウスアウトと呼びます。

解説

マウスアウトで実行する処理を設定

サンプル（mouseout/01.html）を開いてbody内にdiv要素が1つあることを確認してください。jQueryは以下の様に記述され、mouseoutメソッドの引数にfunctionの「outFunc」が設定されています。

$(function () {
	$("button").mouseout(outFunc);
});

mouseoutメソッドの引数に設定するFunctionは以下の様な構文になっています。まず引数（イベントオブジェクト）を受け取ります。そしてマウスアウトしたら実行したい処理を｛｝の中に書きます、何かをreturnする必要はありません。イベントオブジェクトは別項にまとめてあるので、そちらを確認してください。

mouseoutに設定するFunctionの構文: function 任意の名前(イベントオブジェクト){
　マウスアウトで実行したい処理
}

サンプルmouseout/01.htmlで利用したoutFuncは以下の様になっており、アラートで「mouseout」と表示するだけです。このサンプルでは引数（イベントオブジェクト）は利用していません。

function outFunc(eo){
	alert("mouseout");
}

結果として、div要素にマウスアウトするとアラートで「mouseout」と表示されます。
イベントのfunction設定は、無名関数を利用することが多いです。→サンプル（mouseout/01b.html）

$("button").mouseout(function(){
	alert("mouseout");
})

他の要素に設定されたマウスアウト時の処理を実行する

mouseoutメソッドは引数を設定しないと、要素に設定されたマウスアウト時の処理を実行します。
サンプル（mouseout/02.html）を開いてbody内にbutton要素とdiv要素があることを確認してください。

続いてjQueryを確認してください。div要素に設定されたマウスアウト時の処理はmouseout/01b.htmlと同じですが、以下の処理が追加されています。この処理によってbuttonをクリックするとdiv要素に設定されたマウスアウト時の処理が実行されます。

$("button").click(function(){
	$("div").mouseout();
})

結果として、buttonを「クリック」するとdiv要素から「マウスアウト」したのと同じようにアラートで「mouseout」と表示されます。

objectオブジェクトをfunctionに渡す

第1引数にobjectオブジェクトを設定することで、実行するfunctionにデータを渡すことができます。データはイベントオブジェクトのdataプロパティを介して渡されます。サンプル（mouseout/03.html）を開いてbody内の構成はmouseout/01.htmlと同じ事を確認してください。

jQueryは以下の様に記述され、mouseoutメソッドの第1引数にtestプロパティが10の値を持ったobjectオブジェクトが設定されています。このデータはイベントオブジェクト（eo）を通してfunctionに渡され、dataプロパティの値として取得できます。

$("div").mouseout({test:10},function(eo){
	alert(eo.data.test);
})

結果として、div要素からマウスアウトすると第1引数で渡されたtestプロパティの値「10」がアラートで表示されます。

子孫要素にも反応します

mouseoutメソッドは子孫要素からマウスアウトしたときもイベントを受け取ります。
サンプル（mouseout/04.html）を開いてbody内にdiv要素が入れ子になって配置（外側はoutのid属性、内側はinのid属性）されていることを確認してください。

<div id="out">
	<div id="in"></div>
</div>

jQueryは以下の様に記述され、mouseout/01b.htmlとはセレクタが違うだけです。

$("#out").mouseout(function(){
	alert("mouseout")	
});

セレクタに「#out」を設定しているので、外側のdiv要素（outのid属性）からマウスオーバーした際「mouseover」と表示されるのは良いのですが、セレクタで指定されていない内側のdiv要素（inのid属性）からマウスアウトした際も「mouseout」と表示されます。outのdiv要素からinのdiv要素に入るときも「mouseout」と表示されます。これはoutのdivからマウスアウトしたためです。

イベントフローと合わせて覚えておくと良いでしょう→参考：使い方「イベントフロー（1）」

メモ

mouseleaveメソッドとの比較

mouseleaveイベントはバブリングしないため子要素で発生したイベントは親要素に伝わりません。ですので子孫要素に反応させたくない場合はmouseleaveメソッドを利用します。

サンプル（mouseleave/04.html）を開いて以下の様にmouseoutメソッドがmouseleaveメソッドに変更されているのを確認してください。

$("#out").mouseleave(function(){
	alert("mouseleave")	
});

このようにmouseleaveメソッドを利用すれば、子孫要素（内側の黄色いdiv要素）からマウスアウトしてもアラートが出ません。こちらのメソッドのほうが利用しやすいと思います。

次のページ： mouseenter()