第6回 イベント編：連載：jQuery逆引きリファレンス（8/14 ページ）

特定の要素セットに対して、イベント・リスナを設定したり、指定したイベントを実行したりするためのメソッドをまとめた、すぐに役立つ13本を一挙公開。

[山田祥寛（http://www.wings.msn.to/），著]

連載目次

　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 マウス・ポインタが乗ったタイミングで項目の背景色を黄色に変化（Hover.html）
このHTMLを実際にブラウザで開く

ブラウザで開く

リスト097の実行結果

　リスト097の「$('li').hover(……);」の部分は、以下のように記述しても同じ意味です。

$('li').mouseenter(function() {...}).mouseleave(function() {...});

リスト097の「$('li').hover(……);」の部分を個別に記述