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>
リスト097の「$('li').hover(……);」の部分は、以下のように記述しても同じ意味です。
$('li').mouseenter(function() {...}).mouseleave(function() {...});
Copyright© Digital Advantage Corp. All Rights Reserved.