jQuery API の mouseout( fn ) は、マウスアウトイベントにイベントハンドラをバインドしたいときに便利なメソッドだ。
要素からカーソルを外すと、mouseout( fn ) の引数に指定したイベントハンドラを呼び出すことができる。
記述方法
jQuery( セレクター ) . mouseout( イベンドハンドラ );
「セレクター」の要素のマウスアウトイベントに、「イベンドハンドラ」をバインド。
実装例（サンプル）
マウスオーバー：
| セルA | セルB | セルC |
| セルＤ | セルＥ | セルＦ |
実装例（サンプル）の動作について
セルAに、カーソルを合わせると、セルAの背景色を黄色に変え、「マウスオーバー： 」の右側に、「セルA」と表示する。
実装例（サンプル）のソースコード
JavaScript
<script>
<!--
jQuery( function() {
jQuery( '#jquery-api-mouseover td' ) . mouseover( function () {
jQuery( this ) . css( 'backgroundColor', 'yellow' );
var str = jQuery( this ) . text();
jQuery( '#jquery-api-mouseover-contents' ) . text( str );
} );
jQuery( '#jquery-api-mouseover td' ) . mouseout( function () {
jQuery( this ) . css( 'backgroundColor', '#ffffff' );
var str = '';
jQuery( '#jquery-api-mouseover-contents' ) . text( str );
} );
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-api-mouseover td' ) . mouseover( function () {
jQuery( this ) . css( 'backgroundColor', 'yellow' );
var str = jQuery( this ) . text();
jQuery( '#jquery-api-mouseover-contents' ) . text( str );
} );
jQuery( '#jquery-api-mouseover td' ) . mouseout( function () {
jQuery( this ) . css( 'backgroundColor', '#ffffff' );
var str = '';
jQuery( '#jquery-api-mouseover-contents' ) . text( str );
} );
} );
// -->
</script>
HTML
<p>マウスオーバー： <span id="jquery-api-mouseover-contents"></span></p>
<table id="jquery-api-mouseover">
<tr>
<td>セルA</td>
<td>セルB</td>
<td>セルC</td>
</tr>
<tr>
<td>セルＤ</td>
<td>セルＥ</td>
<td>セルＦ</td>
</tr>
</table>
<table id="jquery-api-mouseover">
<tr>
<td>セルA</td>
<td>セルB</td>
<td>セルC</td>
</tr>
<tr>
<td>セルＤ</td>
<td>セルＥ</td>
<td>セルＦ</td>
</tr>
</table>