■HOVER基礎■
▲▲▲普通のテキストのマウスオーバー▲▲▲
あまり普通のテキストに、マウスオーバーを設定をすることはありません。段階を踏むという意味での紹介です。
▲HTML
<p class=”demo1″>マウスを持ってくると文字が赤くなるよ。</p>
▲CSS
.demo1:hover{
color: #ff0000;
}
●解説
これが、基本の形という感じです。
.demo1:hoverという感じで、セレクタのお尻に「:hover」を書き足す。
これが、マウスオーバーの基本です。
▲▲▲リンクテキスト（liタグなし＝aタグのみ）のマウスオーバー▲▲▲
次にリンクテキストのマウスーバーになります。
この方法は、よく使います。
▲HTML
<a href=”#” class=”demo2″>リンクに使うのは一般的！</a>
普通のテキストとの違いは、<a>になったところです。
リンクなので・・・。
▲CSS
.demo2:hover{
color: #ff0000;
text-decoration: none;
}
●解説
HTML、CSSともに、部分的にリンクテキストの色などの装飾を変更するコーディングになっています。
もし、サイト全体やページ全体のリンク色や下線など一括して変更する場合には、次のようなコーディングします。
CSS
a:hover{
color: #ff0000;
text-decoration: none;
}
このような指定をすることによって、すべてのリンクテキスト（<a>部分）に変更が適用されます。
▲▲▲リストにしたリンクテキストのマウスオーバー（liタグ+aタグ）▲▲▲
次は、少し変化球。このコーディングは、ナビゲーション部でよく使います。
▲HTML
<ul class=”demo3″>
<li><a href=”#”>ホーム</a></li>
<li><a href=”#”>お問合せ</a></li>
</ul>
▲CSS
.demo3 li a:hover{
color: #ff0000;
text-decoration: none;
}
●解説
.demo3 li:hoverで大丈夫じゃないの？と思いますが、それだと、リンクテキストに変更が適用されません。
実際は.demo3 li a:hoverというような指定します。
「リストアイテム(<li>)の中のリンク(<a>)をマウスオーバー(:hover)したときだよ」っという感じで指定します。
li:hoverで指定してしまうと、<li>内の普通のテキストだけ変わったりして、その中にあるリンクテキストの装飾は変わりません。
融通の利かないところですね～。
慣れないうちは、「なんで、ここにCSSが効かないんだぁ～」っとイライラしてしまうことがあります。
<a>と、他のタグとのコンビネーションの時は、<a>部分に、しっかりとCSSを指定しないと効かないことがあることを覚えておきましょう。
▲▲▲テキストへのマウスオーバー▲▲▲
背景の色や画像を変えるマウスオーバー
リンクテキストの装飾に使われ、主にボタンなどに使われます。
CSS3やWebフォントが充実してきています。
加えて、サイト自体を軽く、そして、シンプルなデザインするという方向に進んでいるので、最近では、こちらが主流になってきているのではないか？と思います。
▲HTML
1
<a href=”#” class=”demo4″>ボタン</a>
▲CSS
.demo4{
background: #ff00ff;
/*background: url(デフォルトで表示させたい背景画像のURL) no-repeat;*/
padding: 10px 50px;
}
.demo4:hover{
background: #00ff00;
/*background: url(マウスオーバーした時に表示させたい背景画像のURL) no-repeat;*/
}
●解説
2行目と3行目・7行目と8行目は、それぞれ「背景色の変更」と「背景画像の変更」の違いになります。
必要に応じて、入れ替えて使ってみてください。
4行目のpaddingで、ボタンの大きさを調整しています。
▲▲▲画像のみのマウスオーバー（よく使う=重要）▲▲▲
2つの画像ファイルを使ったマウスオーバー
こちらは、テキストも画像になっている時のパターンです。
マウスオーバー前の画像（表紙）と、マウスオーバーしたときの画像（背景）の2つの画像ファイルを用意します。
▲HTML
<p class=”demo5″>
<a href=”#”>
<img src=”通常時に表示させたい画像のURL” width=”200″ height=”60″ alt=”” />
</a>
</p>
HTMLの方には、表紙となる画像ファイルを指定します。
▲CSS
.demo5{
background: url(マウスオーバー時に表示させたい画像のURL) no-repeat;
width: 200px;
height: 60px;
}
.demo5 a{
display: block;
}
.demo5 img{
border: none;
}
.demo5 a:hover{
background: none;
}
.demo5 a:hover img{
visibility: hidden;
}
●解説
2～4行目は、背景側の設定ですね。
幅や高さは、表紙となる画像の大きさに合わせましょう。
16行目のvisibility: hidden;。
ここが、一番のキモです。
マウスオーバーすることによって、表紙の画像が非表示になるように指定しています。
これを指定することにより、マウスオーバーしたときに表紙の画像が消えて、背景画像が現れる、そんな仕組みになっています。
text-indent: -9999px:などを使った、テキスト非表示テクを使わなくてもいいので、綺麗なHTMLコーディングが実現できます。
CSSスプライトを使ったマウスオーバー
リンクと文字と画像、リンクと画像、画像だけなど、その組み合わせによって、CSSスプライトのコーディングが変わってきます。
CSSスプライトの深い所は、また何れということで、お得意の後回し・・・。
※paddingで配置設定すると背景画像がずれるので注意。
▲▲▲CSSスプライト画像▲▲▲
先ほどは、2つの画像ファイルを用意しました。
CSSスプライトでは、表紙と背景が繋がった1つの画像ファイルを用意します。
この画像を上下にスライドさせて、画像の切り替えを表現します。
それが、CSSスプライトと言います！・・・ものすごいザックリ感ですが。。。
▲HTML
<p class=”demo6″>
<a href=”#”>
<img src=”http….” width=”200″ height=”120″ alt=”” />
</a>
</p>
HTMLには、普通に画像ファイルを指定します。
画像の幅と高さは、画像の原寸サイズで指定してください。
原寸サイズで、指定しないと、画像が伸縮して表示されるので、注意が必要です。
▲CSS
.demo6 a{
width: 200px;
height: 60px;
float: left;
overflow: hidden;
}
.demo6 img{
border: none;
/*margin-top: -60px;*/
}
.demo6 a:hover img{
margin-top: -60px;
}
●解説
2、3行目で、ボタンの大きさを指定してます。
4、5行目は、少し難しいです。
簡単に言うと、表示させたくない部分を隠しています。
ここでは、背景画像を隠しているという感じです。
7～10行目では、表紙となる画像の位置を調整します。
もし、表紙となる画像が、ズレている場合、margin-topやmargin-leftなどを使って、位置調整を行います。
12行目、今度は、マウスオーバーしたときに表示される、背景となる画像を表示する指定になります。
これもmargin-topやmargin-leftなどを使用して、調整を行います。
marginを使って、表示の枠から画像を押し出したり、引き戻したりしている、そんな感じです。
今回の場合は、マウスオーバーしたときに背景画像を、上に60px引き上げている・・・ということになります。
最後に、後続でfloatの解除を忘れずに行いましょう。