nicepaper @ ウィキ
nicepaper @ ウィキ

色々なWebサイトでナビゲーションのメニュー部分にマウスを乗っけた時に、その部分が「勝手に変わった！」なんて経験ありますよね？
これには様々な方法がありますが、今回はCSSでできる方法を取り上げたいと思います。
マウスを乗っけることを「マウスオーバー」といいます。そのマウスオーバーの挙動を設定するプロパティを「hoverプロパティ」といい、今回はこれを用います。 hoverとは対象の画像や文字といったオブジェクトの上にマウスが乗っかった時に行う挙動を指定するcssの擬似クラスです。
今回は実際のWebページでの使用例の中でも、Javascriptを使わずにできる良い方法を３つ紹介します。

目次




hoverプロパティの基本的な使い方


擬似クラスなので対象のセレクタ名に「:hover」をつけ、マウスオーバー時の動作を書いていきます。 

#nav1 a:hover{
	font-family: Georgia, "Times New Roman", Times, serif;
	background: #FFB;
}


今回はフォントを変え、背景を変えるように記述しました。 実行結果は以下のようになります。

１，マウスオーバー時に背景を透過させる


画像を透過させることでマウスオーバーを分かりやすくします。 

#nav2 a:hover{ 
	background: rgba(255,255,255,0.7);
}


以下、実行結果になります。


メリット：1つの画像なので実装が簡単
デメリット:デザイン性としては普通


２，cssのbackgroundの画像を変更させる


画像を２つ用意して(今回はpencil.pngとpencil_hover.png)、hover時に別画像を埋め込んで表示させます。 用意した画像は

#image #image 
#nav3 li a {
	height: 50px;
	width: 200px;
	padding-top: 30px;
	font-size: 18px;
	text-decoration: none;	background: url(pencil.png);		/*　ここを追記　*/
}
#nav3 a:hover{
	background: url(pencil_hover.png) 		/*　ここを追記　*/
}

以下、実行結果です。

メリット：感覚的には分かりやすい
デメリット：背景は変更できるが、テキストの表現がCSS依存のみになってしまう

３，overflowを用いた方法

先ほどの２の方法で出たデメリットを解消できるのがこの方法です。
まず、overflowプロパティとは、ボックス内に画像を表示するときに、はみ出た部分をどうするか、というプロパティです。
そこでoverflowを用いた方法では「２つの画像をくっつけた画像」を使用します。

imageプラグインエラー : ご指定のファイルが見つかりません。ファイル名を確認して、再度指定してください。 (hover2type.JPG)

この方法のメリットは、CSSでは表現できないテキストのデザイン、を使うことが出来る、という点です。

CSSのa部分に 

#nav4 a {
	overflow: hidden;	　/* はみ出た部分は隠す */
	padding: 0;
}

CSSのa:hover内に 

#nav4 a:hover{
	margin-top: -80px;		/* 表示する際にボックスの上80pxから描画する */
}


という記述を追加しましょう。
すると

このような状態になり、見事にマウスオーバー時に下の画像が表示されることになります。

以下、実行結果になります。


メリット：CSSでは表現できないテキストのデザイン
デメリット:画像を作る手間

以下コピペ用

HTML 

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>150603_hover</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="150603_hover.css">
</head>

<body>
    <div id="wrapper">
        <div id="nav1">
            <ul>
                <li><a href="#">hover</a></li> 
                <li><a href="#">hover</a></li> 
                <li><a href="#">hover</a></li> 
            </ul>
        </div>
        <div id="blank"></div>
        <div id="nav2">
            <ul>
                <li><a href="#">opacity</a></li> 
                <li><a href="#">opacity</a></li> 
                <li><a href="#">opacity</a></li> 
            </ul>
        </div>
        <div id="blank"></div>
        <div id="nav3">
            <ul>
                <li><a href="#">background</a></li> 
                <li><a href="#">background</a></li> 
                <li><a href="#">background</a></li> 
            </ul>
        </div>
        <div id="blank"></div>
        <div id="nav4">
            <ul>
                <li><a href="#"><img src="home2type.png" alt="HOME"></a></li> 
                <li><a href="#"><img src="home2type.png" alt="HOME"></a></li> 
                <li><a href="#"><img src="home2type.png" alt="HOME"></a></li> 
            </ul>
    </div>
    </div>
</body>
</html>

CSS 

@charset "utf-8";
/* CSS Document */

#wrapper {		/*　全体を真ん中に　*/
	margin: 30px auto;
	width: 800px;
	height: 800px;
}
#blank {    /*　複数のnavを同時に表示させるためだけのもの　*/
	clear: both;
	width: 100px;
	height: 100px;	
}


/* #nav1記述部 */


#nav1 ul {
	height: 80px;
	margin: 0;
	padding: 0;
	border: 1px solid #000;
	line-height: 1.0;
	background: #BFF;
}
#nav1 li,#nav1 li a {
	display: block;
}
#nav1 li {
	height: 80px;
	float: left;
	width: 200px;
	margin: 0;
	padding: 0;
	text-align: center;
	border-right: 1px solid #000;
}
#nav1 li a {
	height: 50px;
	width: 200px;
	padding-top: 30px;
	font-size: 18px;
	text-decoration: none;
}
#nav1 a:hover{
	text-shadow: #666;
	font-family: Georgia, "Times New Roman", Times, serif;
	background: #FFB;
}


/* #nav2記述部 */


#nav2 ul {
	height: 80px;
	margin: 0;
	padding: 0;
	border: 1px solid #000;
	line-height: 1.0;
	background: #BFF;
}
#nav2 li,#nav2 li a {
	display: block;
}
#nav2 li {
	height: 80px;
	float: left;
	width: 200px;
	margin: 0;
	padding: 0;
	text-align: center;
	border-right: 1px solid #000;
}
#nav2 li a {
	height: 50px;
	width: 200px;
	padding-top: 30px;
	font-size: 18px;
	text-decoration: none;
}
#nav2 a:hover{
	background: rgba(255,255,255,0.7); /*  opacityプロパティでも良い */
}


/* #nav3記述部 */


#nav3 ul {
	height: 80px;
	margin: 0 0 10px 0;
	padding: 0;
	border: 1px solid #000;
	line-height: 1.0;
	background: #BFF;
}
#nav3 li,#nav3 li a {
	display: block;
}
#nav3 li {
	height: 80px;
	float: left;
	width: 200px;
	margin: 0;
	padding: 0;
	text-align: center;
	border-right: 1px solid #000;
}
#nav3 li a {
	height: 50px;
	width: 200px;
	padding-top: 30px;
	font-size: 18px;
	text-decoration: none;
	background: url(pencil.png);	/*　１つ目の画像を設定しておく　*/
}
#nav3 a:hover{
	background: url(pencil_hover.png)	/*  hover時に２つ目の画像を埋め込んで表示  */
}


/* #nav4記述部 */


#nav4 ul {
	overflow: hidden;	/*  overflowプロパティを設定、liでも良い  */
	height: 80px;
	margin: 0;
	padding: 0;
	border: 1px solid #000;
	line-height: 1.0;
	background: #BFF;
}
#nav4 li,#nav4 li a {
	display: block;
}
#nav4 li {
	height: 80px;
	float: left;
	width: 200px;
	margin: 0;
	padding: 0;
	text-align: center;
	border-right: 1px solid #000;
}
#nav4 li a {
	height: 50px;
	width: 200px;
	padding-top: 0;		/*　ここでは画像を表示させるために、0px。あえて記述。なくても良い。　*/
	font-size: 18px;
	text-decoration: none;
}
#nav4 a:hover{
	margin-top: -80px;	/*  下の画像を表示	  */
}

実行結果

「ナビゲーションメニューに使えるマウスオーバー時の3つの表現方法」をウィキ内検索
最終更新：2015年06月05日 15:32