jQuery API の hover( fn ) は、マウスホバーイベントにイベントハンドラをバインドしたいときに便利なメソッドだ。
要素の上にカーソルを合わせたときと要素の上からカーソルを外したとき、hover( fn ) の引数に指定したイベントハンドラを呼び出すことができる。
記述方法
jQuery( セレクター ) . hover( イベンドハンドラ );
「セレクター」の要素のマウスホバーイベントに、「イベンドハンドラ」をバインド。
実装例（サンプル）
実装例（サンプル）の動作について
黄色のボックスの上にカーソルを合わせると、黄色のボックス自体を、フェードアウト、フェードインさせる。黄色のボックスの上からカーソルを外したときも同様に、フェードアウト、フェードインさせる。
実装例（サンプル）のソースコード
JavaScript
<script>
<!--
jQuery( function() {
jQuery( '#jquery-api-hover' ) . hover(
function () {
jQuery( this ) . fadeOut( 500 );
jQuery( this ) . fadeIn( 500 );
}
);
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-api-hover' ) . hover(
function () {
jQuery( this ) . fadeOut( 500 );
jQuery( this ) . fadeIn( 500 );
}
);
} );
// -->
</script>
CSS
<style>
<!--
#jquery-api-hover {
width: 100%;
height: 200px;
background-color: yellow;
border-radius: 10px;
}
-->
</style>
<!--
#jquery-api-hover {
width: 100%;
height: 200px;
background-color: yellow;
border-radius: 10px;
}
-->
</style>
HTML
<div id="jquery-api-hover"></div>