スタートページ＞ Javascript＞ jQueryの基礎

jQueryの実例：hoverイベント

hoverイベントにより、マウスカーソルがセレクタの要素の上にマウス乗ったとき／外れたときの処理を簡単に記述できます。

一般形式

hoverは、２つの引数をもちます。
　　　　$(セレクタ).hover(fn-over, fn-off);
　　fn-over：マウスがセレクタに乗ったときの処理
　　fn-out： マウスがセレクタから離れたときの処理
fn-over, fn-out は、通常は関数ですから、次のような形式になります。

<script type="text/javascript">
　　$(セレクタ).hover(
　　　　function() {　　　　　　// マウスが乗ったとき
　　　　　　fn-over の処理
　　　　},　　　　　　　　　　　// 引数の区切なので「,」が必要
　　　　function() {  　　　　　// マウスが離れたとき（elseなどは使わない）
　　　　　　fn-out の処理
　　　　}
　　);
</script>

例１：特定個所の強調（文字色の変化）

該当個所（class="キーワード"）にマウスが乗ったとき、その文字列を赤色にし、離れたとき、黒色に戻す例です。次の「文章」での▼の直前に<span class="キーワード">、▲の直後に</span>があります。

文章
　jQueryとは、▼John Resig▲らによって開発されたJavaScriptのライブラリである。 、２００６年に初版が、▼オープンソースソフトウェア▲として公開され、２０１２年には、jQueryやその関連ソフトの推進を目的とした非営利団体▼jQuery Foudation▲が設立された。現在、jQueryには豊富な▼プラグインソフト▲が、多数の組織や個人により公開されている。

<script>
    $(function(){
        $(.キーワード").hover(
            function() {
                $(this).css("color", "red");
            },
            function() {
                $(this).css("color", "black");
            }
        );
    });
</script>

$(this) とは、イベントでのセレクタ（ここでは、".キーワード"）をそのまま使うという意味ですが、さらに「引金となった個所の情報」も加えています。
　　$(this).css("color", "red");
　　　　マウスが乗った個所だけが赤くなる。
　　$(".キーワード").css("color", "red");
　　　　▼～▲のすべての個所が赤くなる。

例２：「注」の表示（表示・非表示との連携）

次の「文章」の［注］にマウスが乗ると注が表示され、離れると消えます。

文章
ポピュラーなjQueryのプラグインソフトに、jQuery UI <span id="注１">［注１］</span>があります。それをＣＤＮ<span id="注２">［注２］</span>として使用するには、head部に次の指定をすればよいのです。（以下省略）

(ここに「注２本文」が<div id="注２本文" style="display:none">～～～</div>があります。）

<script type="text/javascript">
  $(function(){
    $("#注１").hover(
      function() {
        $(this).text("(user interface)");
      },
      function() {
        $(this).text("［注１］");
      }
    );
  });
</script>

<script type="text/javascript">
  $(function(){
    $("#注２").hover(
      function() {
        $("#注２本文").css("display", "block");
      },
      function() {
        $("#注２本文").css("display", "none");
      }
    );
  });
</script>

「注１」でがマウスを乗せる個所と注本文を表示する個所が同一個所ですので「this」を使うことにより記述できます。

それに対して「注２」では、マウスを乗せる個所と注本文を表示する個所が異なります。それで、「注２本文」をdispray block/none で表示・非表示させています。

例３：サムネイル画像の拡大表示

小さな画像（サムネイル画像）を並べて表示し、マウスを乗せた画像を拡大表示します。

<script type="text/javascript">
    $(function() { 
        var 拡大画像 = new Image();          // Ａ
        $("[id^='画像']").hover(             // Ｂ
            function(){
                拡大画像 = document.getElementById("拡大画像表示位置");// Ｃ
                拡大画像.src = this.src;     // Ｄ
                拡大画像.width = "200";      // Ｅ
            }, 
            function () { 
                拡大画像.width = "0";       // Ｆ
            } 
        ); 
    }); 
</script>

<p>
<img id="画像１" src="called/image1.jpeg" width="100" alt="">  <!-- Ｇ -->
<img id="画像２" src="called/image2.jpeg" width="100" alt="">
</p> 
<div><img id="拡大画像表示位置"></div>        <!-- Ｈ -->

このスクリプトと　$("[id^='画像']").click を組み合わせて、クリックしたら画像に関する記事を表示するようなツールにすることができます。

iQueryを使わずにJavascriptだけでもこれと同じ機能をもたせることができます（参照：「画像の読込表示 画像の拡大」。iQueryのほうが、特にＨＴＭＬの記述が簡素になっています。

例４：画像の切り替え

ベースになる画像（called/image1.jpeg）が表示されており、それにマウスが乗ると代替の画像（called/image2.jpeg）になります。代替画像からマウスが離れるとベース画像に戻ります。

<script type="code">
    $(function(){ 
        $("#例４表示位置").hover( 
            function(){ 
                var 代替画像 = $(this).attr("src")                        // Ａ
                    .replace("called/image1.jpeg","called/image2.jpeg");  // Ｂ
                $(this).attr("src",代替画像);                        // Ｃ
            }, 
            function(){ 
                var ベース画像 = $(this).attr("src")
                    .replace("called/image2.jpeg","called/image1.jpeg"); 
                $(this).attr("src",ベース画像); 
            } 
        ); 
    }); 
</script>

<p><img id="例４表示位置" src="called/image1.jpeg" alt=""></p>