連載
» 2010年04月23日 00時00分 公開

連載:jQuery逆引きリファレンス:第6回 イベント編 (8/14)

[山田祥寛(http://www.wings.msn.to/),著]



「連載:jQuery逆引きリファレンス」のインデックス

連載目次


 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(……);」の部分を個別に記述

Copyright© Digital Advantage Corp. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。