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