[jQuery] マウスオーバー・マウスアウトで画像を表示・非表示にする方法

HTMLのある要素の上にマウスカーソルを乗せると画像が表示され、カーソルを外すと画像が消えたりするデザインのサイトをよく見かけたりしますが、どう実装するんだろうってことで調べてみました。

ようは、こんな感じ。

- DIV要素にマウスカーソルを乗せてみる

- DIV要素からマウスカーソルを外す（下のDIV要素にカーソルを合わせる）

2番目のDIV要素にマウスを合わせると虫眼鏡のアイコンが表示され、マウスを3番目のDIV要素に合わせると先ほど表示したアイコンが消え、マウスを合わせた3番目のDIV要素内に表示されます。

ｊQuery＋CSSによる画像の表示・非表示の実装

作成したHTMLはこんな感じ。

<html>
<head>
<meta content="ja" http-equiv="content-language"/>
<meta content="text/html; charset=UTF-8" http-equiv="content-type"/>
<script type="text/javascript" src="./jquery.js"></script>
<script>
$(document).ready(function(){
    com = $("div.comment");
    for (i = 0; i < com.length; i++) {
        com.eq(i).hover(function(){
            $("img.search_btn", this).css("visibility", "visible");
        },function(){
            $("img.search_btn", this).css("visibility", "hidden");
        })
    }
})
</script>
<style type="text/css">
<!--
div.comment { width:400px; height:25px; text-align:right; background-color: #CECECE; }
img.search_btn { visibility:hidden; }
-->
</style>
</head>
<body>
<br />
<br />
<div class="comment"><img class="search_btn" src="./search_button.gif" /></div>
<br />
<div class="comment"><img class="search_btn" src="./search_button.gif" /></div>
<br />
<div class="comment"><img class="search_btn" src="./search_button.gif" /></div>
</body>
</html>

まず、DIV要素内に画像タグを埋め込んでおき、それをCSSで非表示（visibility:hidden）にしておきます。

次に、jQueryのロジック部分で

    com = $("div.comment");
    for (i = 0; i < com.length; i++) {
        com.eq(i).hover(function(){
            $("img.search_btn", this).css("visibility", "visible");
        },function(){
            $("img.search_btn", this).css("visibility", "hidden");
        })
    }

というところでDIV要素のオブジェクトを取得し、その数だけhover（マウスオーバー、マウスアウト時の挙動）を設定します。

画像の表示、非表示は同じくCSSの情報をセットすることでコントロールしています。

（visibility:visibleで画像を表示）

hover内の最初のfunction()で定義するのがマウスオーバー時の挙動、次のfunction()で定義するのがマウスアウト時の挙動です。

jQueryのDOM操作による画像の表示・非表示の実装

以下、余談にはなりますがDOMを追加・削除することでも画像の表示、非表示を実現することは可能です。

こちらは、まったくCSSに頼らないやり方になります。

まず最初に、DIV要素内に埋め込んでいたIMGタグとそのCSS部分を削除しておきます。

<style type="text/css">
<!--
div.comment { width:400px; height:25px; text-align:right; background-color: #CECECE; }
-->
</style>
</head>
<body>
<br />
<br />
<div class="comment">&nbsp;</div>
<br />
<div class="comment">&nbsp;</div>
<br />
<div class="comment">&nbsp;</div>
</body>

次に、jQueryのロジック部分を下記のように編集。

$(document).ready(function(){
    com = $("div.comment");
    for (i = 0; i < com.length; i++) {
        com.eq(i).hover(function(){
            $(this).append("<img class='search_btn' src='./search_button.gif' />");
        },function(){
            $("img", this).remove();
        })
    }
})

実装方法にあまり変わりはないのですが、マウスオーバー時にIMGタグを追加し、マウスアウト時にIMGタグを削除するというやり方になります。

ただ、マウスオーバー・マウスアウトごとに要素の追加・削除が行われるのでパフォーマンス的には先ほど紹介したCSSによる実装よりは劣ります。

何らかの理由でその要素のCSSの変更ができないって場合は、こちらの方法でいけるかもしれません。

[PR]NTTPCのVPS 『WebARENA SuitePRO V3』

[PR]ASUSの公式オンラインショッピングサイトはこちら

[PR]重いパソコンがサクサク動くウイルス対策ソフト

APC+jQuery UIを使ってファイルアップロード時にプログレスバーを表示する

jQuery UI Sortableを使ってドラッグ＆ドロップでリストを並び替える

[PHP] pChartの使い方 - 棒グラフとレーダーチャートを描いてみる

アメブロで「続きを読む」を実装する方法

Twitter入力フォームのように文字カウントしてくれるcharacter count

AmebloのフリープラグインのJavaScriptをGoogle codeにホストしたよ

Googleサジェストが実装できるjQuery Autocomplete Mod

[jQuery] 外部JavaScriptファイル読込みに関する考察