webfeelfree

CSSで実装する擬似クラス(:hover)を使ったマウスオーバー

img_20140829002
マウスオーバーのやり方には、色んな方法があります。

CSSを使うにしても「CSSスプライト」を使ったり、JavaScriptでも「jQuery」を使ってみたりと言ってしまえば、コーディングする人のセンスや能力で、色んなコーディングの仕方があって多種多様な方法があります。

今回は、マウスオーバーの基礎と言っても過言ではない!?
CSSの擬似クラス(:hover)を使ったマウスオーバーをメモっていきたいと思います。

普通のテキストのマウスオーバー

あまり普通のテキストに、マウスオーバーを設定をすることはありません。
段階を踏むという意味での紹介です。

HTML

<p class="demo1">マウスを持ってくると文字が赤くなるよ。</p>

CSS

.demo1:hover{
    color: #ff0000;
}

これが、基本の形という感じです。
.demo1:hoverという感じで、セレクタのお尻に「:hover」を書き足す。
これが、マウスオーバーの基本です。

リンクテキストのマウスオーバー

次にリンクテキストのマウスーバーになります。
この方法は、よく使います。

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>部分)に変更が適用されます。

リストにしたリンクテキストのマウスオーバー

次は、少し変化球。
このコーディングは、ナビゲーション部でよく使います。

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を指定しないと効かないことがあることを覚えておきましょう。

デモ前編

See the Pen mouseover-change-text by webfeelfree (@webfeelfree) on CodePen.4259

背景の色や画像を変えるマウスオーバー

リンクテキストの装飾に使われ、主にボタンなどに使われます。

CSS3やWebフォントが充実してきています。
加えて、サイト自体を軽く、そして、シンプルなデザインするという方向に進んでいるので、最近では、こちらが主流になってきているのではないか?と思います。

HTML

<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スプライトの深い所は、また何れということで、お得意の後回し・・・。

ここでは、リンクと画像を組み合わせたCSSスプライトを紹介します。
特に、text-indent: -9999px:などのテキスト非表示テクを気にしてしまう人は、参考にしてみてはいかがでしょうか?

CSSスプライト画像

先ほどは、2つの画像ファイルを用意しました。
CSSスプライトでは、表紙と背景が繋がった1つの画像ファイルを用意します。

この画像を上下にスライドさせて、画像の切り替えを表現します。
それが、CSSスプライトと言います!・・・ものすごいザックリ感ですが。。。

HTML

<p class="demo6">
  <a href="#">
    <img src="http://webfeelfree.com/sample/img/btn_demo6.gif" 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-topmargin-leftなどを使って、位置調整を行います。

12行目、今度は、マウスオーバーしたときに表示される、背景となる画像を表示する指定になります。
これもmargin-topmargin-leftなどを使用して、調整を行います。

marginを使って、表示の枠から画像を押し出したり、引き戻したりしている、そんな感じです。
今回の場合は、マウスオーバーしたときに背景画像を、上に60px引き上げている・・・ということになります。

最後に、後続でfloatの解除を忘れずに行いましょう。

デモ後編

See the Pen mouseover-change-image by webfeelfree (@webfeelfree) on CodePen.4259

あとがき

スマートフォンなどのタッチデバイスが増えてきているので、マウスオーバーする機会が減ってきているのが現状です。
しかし、まだまだポイントデバイスもなくならないので、自分の作りたいサイトのイメージやターゲットユーザなどを見て、環境に合わせて使ってみてはいかがでしょうか?

参考
少しのコードで実装可能な20のCSS小技集 | Webクリエイターボックス

リメイクにあたって

この記事は、当初の「CSSの擬似クラス(:hover)でマウスオーバー」という記事をリメイクした記事になります。
思った以上に、多くの人に見てもらっている感じだったので、リメイクしてみました。

リメイクというよりも、ほぼ新しい記事になったような気もします。

今回は、CSSスプライトの内容も付け足してみました。
良かったら、参考にしていただければ有難いです♪

参考
[CSS]背景画像を使用しないCSSスプライトのテクニック | コリス

最新記事

読まれている記事

ツイッター

カテゴリー