第6回 イベント編：連載：jQuery逆引きリファレンス（8/14 ページ）
特定の要素セットに対して、イベント・リスナを設定したり、指定したイベントを実行したりするためのメソッドをまとめた、すぐに役立つ13本を一挙公開。
hoverメソッドを利用することで、マウス・ポインタが要素に乗ったとき（mouseenter）、要素から外れたとき（mouseleave）の挙動をまとめて定義できます。
mouseenter、mouseleaveメソッドを個別に呼び出しても構いませんが、多くの場合、両者は同時に実行しますので、通常はhoverメソッドを利用することをお勧めします。次のサンプルでは、マウス・ポインタが乗ったタイミングで項目の背景色を黄色にします。
<script type="text/javascript">
$(function() {
// <li>要素に対して、mouseenter／mouseleaveイベント・リスナを登録
$('li').hover(
// mouseenterイベント・リスナ
// （マウスを乗せたときに背景色を黄色に）
function() {
$(this).css('background-color', 'Yellow');
},
// mouseleaveイベント・リスナ
// （マウスを外したときに背景色を白色に）
function() {
$(this).css('background-color', 'white');
}
);
});
</script>
……中略……
<ul>
<li>ASP.NET MVC実践プログラミング</li>
<li>10日でおぼえるASP.NET入門教室</li>
<li>JavaScriptマスターブック</li>
</ul>
このHTMLを実際にブラウザで開く
リスト097の「$('li').hover(……);」の部分は、以下のように記述しても同じ意味です。
$('li').mouseenter(function() {...}).mouseleave(function() {...});
Copyright© Digital Advantage Corp. All Rights Reserved.