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