2013.03.07
javascript

マウスオーバーでタブの表示切り替え jQuery プラグインなし

タブみたいなメニューで、マウスオーバーすると同じページ内(同じHTMLファイル内)で表示を切り替える方法です。

Attention!!

この記事はソースを大幅に改良してこちらへ書き直しました。

マウスオーバーで表示、非表示はCSSだけでもできますが、以前書いたクリックしてタブの表示切替をちょっと修正してjQueryで作りました。

マウスオーバーで表示を切り替える

head内にjQueryを読み込む記述

以下をheadに記述します。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

HTMLのソース

サンプルから一部内容を省略しますが、以下は説明です。

<div class="full_content">
<ul>
   <li class="hover">ホーム</li>
      <div class="content">
      ここに内容が入ります。     
      </div> 
     
   <li>画像</li>
      <div class="content">
    ここに内容が入ります。 
    </div>

   <li>リンク</li>
      <div class="content">
      ここに内容が入ります。
      </div>
  
   <li>入力</li>
      <div class="content">
      ここに内容が入ります。
      </div>
   
   <li>テーブル</li>
      <div class="content">
      ここに内容が入ります。
      </div>     
</ul>
</div>

「ここに内容が入ります。」の部分は、切り替わったときにそれぞれ表示される部分です。
ハイライトした3行目は後述します。

CSSのソース

.full_content {
	width:508px;
	height:380px;
	position:relative;
	margin:0 auto;
	clear:both;
}
ul li{
	width:100px;
	height:25px;
	background:#B99DC6;
	float:left;
	list-style:none;
	padding:10px 0 0;
	margin-left:2px;
	text-align:center;
	display:block;
	cursor: pointer;
	color:#FFF;
}
ul li:first-child {
	margin-left:0;
}
ul {
	padding:0;
	margin:0;
}
.hover {
	background:#9C9;
	font-weight:bold;
}
.content {
	width:478px;
	height:320px;
	border:#9C9 5px solid;
	background:#FFF;
	top:35px;
	left:0;
	padding:10px;
	position:absolute;
}

こちらにも書きましたが、CSSについてざっくりと説明します。

  • 4行目と40行目
  • 4行目のposition:relative;に対し40行目にposition:absolute;を記述しています。
    ここでは.full_contentが親要素で.contentが子要素になります。

  • 18行目
  • cursorというプロパティでマウスカーソルの形を変更できます。
    ここではリンクを使っていませんのでマウスを乗せても通常の矢印マークとなってしまい、クリックできるのが一見わかりません。
    クリックすると切り替わる仕様ですので、マウスオーバー時に指マークになるように変更。

  • 21行目
  • :first-childというのは一番目の子要素に適用できるセレクタです。今回の場合は、liの一番目、つまりタブの一番左側だけmargin-left:0;にという意味ですね。
    15行目でmargin-left:2px;と記述していますが、CSSは後から記述された方が優先されるので21行目の方が適用されます。

jQueryのソース

head内もしくはbody内に以下を記述します。

<script type="text/javascript">
$ (function(){
	$ (".content:not('li.hover + .content')").hide();	
	$ ("li").hover(function(){
		$("li").removeClass("hover");
		$ (this).addClass("hover");
		$ (".content").fadeOut();
		$ ("li.hover + .content").fadeIn();
	},
	function(){		
	});	
});
</script>
  • 2行目
  • CSSで記述した.contentを.hide()、つまり隠したい状況です。.contentを隠したいだけなら、2行目は

    $ (".content").hide();
    

    となります。
    HTMLのソースでハイライトした3行目を見てみると、liにhoverというクラスが付いています。
    ページが読み込まれた時には、この部分は隠さないようにします。
    今回はページが読み込まれた時にli.hover + .contentの部分は隠さないようにするので、:not(‘li.hover + .content’)を追加。
    :not()は()以外となります。
    ここではli.hover + .content以外の.contentを隠すとなります。

  • 3行目~8行目
  • liにマウスオーバーしたときに

    1. liからhoverというクラスを消す。
    2. クリックしたli(ここではthis)にhoverというクラスを追加。
    3. .contentを.fadeOut()、つまりフェードアウト(ゆっくりと消す)する。
    4. hoverというクラスがついたliの.contentを.fadeIn()、つまりフェードイン(ゆっくりと出てくるようにする)する。
  • 9行目~10行目
  • 実はこの部分の記述が正しいのかはわかりません。
    jQueryでhoverを使うと下記のように記述しないといけません。

    .hover(over,out)
    

    つまり、マウスオーバーしたとき(over)、マウスを外したとき(out)と両方記述しないとjQueryがうまく動かないのです。
    この13行目~14行目はoutの部分なのですが、ご覧のとおり空白です。
    だからといって13行目~14行目を消すと正しく動きません。

    CSSでホバーを使う場合はマウスを外したとき(ここでいうout)を指定しなくても、マウスを外せばマウスオーバーする前に戻ってくれるのですが…。

    でもホバーにおけるjQeryとCSSのこの違いはある意味デザイン・ディベロップする上で使い分けもできますね!

jQueryのソース mouseover()の場合

.hover()ではなく.mouseover()を使った方が正しいのかもしれません、この場合。
見た目も動きも全く同じですが.mouseover()を使った方法もご紹介。

マウスオーバーで表示を切り替える .mouseover()

<script type="text/javascript">
$ (function(){
	$ (".content:not('li.hover + .content')").hide();	
	$ ("li").mouseover(function(){
		$("li").removeClass("hover");
		$ (this).addClass("hover");
		$ (".content").fadeOut();
		$ ("li.hover + .content").fadeIn();			
	});	
});
</script>

.mouseover()を使用することによって、4行目が.hover()を使ったときと違います。
.mouseover()の場合は、.hover()のときのようにマウスが外れたときを指定しなくても良いのでソースも若干スッキリしますね。

関連する記事

コメント & トラックバック
  1. ハル

    こんにちは。
    こちらを参考にして、サムネイルにマウスオンしたら別の場所に拡大画像が表示される仕組みを作ることができました。
    ありがとうございました!

    IE7では動かないようなのですが、動かす方法などありそうでしょうか。もしお分かりでしたらご教授ください!
    よろしくお願いします。


    • Ri-mode

      ハルさん

      返信が遅くなってしまい恐縮です。
      上記のソースはCSS3を使用しているので、IE7では動かない仕様です。

      お力になれず申し訳ないです。


コメントをどうぞ

技術的なサポート、質問等にはお答えできない場合もございます。
また、現在更新頻度はかなり低めですので、返信できたとしてもかなり遅くなる場合があります。
ご理解くださいませ。


以下のHTMLタグが使えます。
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*


おすすめの本
ネットで調べればなんとかなる!という時代ですが、良い本にめぐり合い、基礎をきっちり固めることで応用がきくテクニックを身に着けることができます。もっと上達したい人におすすめの本をいくつかご紹介します。
TO TOP