CSS入門:疑似クラス [:hover] の色々な使い方

    • このページをはてなブックマークに追加

    公開日:2017年01月11日 最終更新日:2019年09月27日

    疑似クラスの「:hover」を使い、アンカーリンクなどのマウスオーバー時の動作を変更させる方法について解説します。

    目次

    1. リンクに関する疑似クラスについて

    疑似クラスの「:hover」はアンカーリンクの動作を変更する際によく使われるクラスで要素にマウスオーバーした時の動作を指定する疑似クラスです。その他の「:link擬似クラス」、「:visited擬似クラス」や「:active擬似クラス」と共に用いられることが多いため、どのような表示になるか一緒に確認してみましょう。

    1.1. リンクテキストの色を変更する

    以下「hover1.html」のコードをコピーしてPC上の任意の場所に保存して下さい。ファイルの保存形式は「utf-8」とします。

    ●基本の書式【:hover】

    ●hover1.html

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>CSS入門 - :hover の使い方</title>
    <style>
    a:link {
    color: #000000; /* リンクをクリックしていない時の色 */
    }
    a:visited {
    color: #FF9696; /* すでにリンクをクリックした時の色 */
    }
    a:hover {
    color: #006DD9; /* マウスオーバーした時に色を変える */
    }
    a:active {
    color: #B20000; /* 要素をマウスでクリックした時の色 */
    }
    </style>
    </head>
    <body>
    <p><a href="#">リンクテキスト</a>の仕様を変更する方法</p>
    </body>
    </html>

    「:link」疑似クラスはまだ閲覧していない(クリックしていない)ページリンクに対する指定で、
    「:visited」疑似クラスはすでに閲覧した(クリック済み)のページリンクに対する指定です。
    両方ともリンクに関するものですのでアンカータグ(a要素)に使用します。

    サンプルコードはリンクの状態によりテキストの色が変わるように指定しています。

    ●ブラウザーの表示(:link)

    hover1

    ●ブラウザーの表示(:visited)

    hover2

    「:hover」疑似クラスは、リンクをマウスオーバーした時の指定で、
    「:active」疑似クラスは、リンクをクリックした時の指定です。
    この二つの疑似クラスは動的な疑似クラスでマウスの動きに応じて要素に対する動作の指定をすることができます。リンク以外のタグに使うことも可能です。

    ●ブラウザーの表示(:hover)

    hover3

    ●ブラウザーの表示(:active)

    hover4

    ▲ページトップへ戻る

    1.2. :hoverを使ってマウスオーバー時のリンクテキストの線種を変更する

    次に「:hover」疑似クラスを使ってマウスオーバーした時のリンクの線種を変更するCSSをご紹介します。

    ●hover2.html

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>CSS入門 - :hover の使い方</title>
    <style>
    a {
    text-decoration: none; /* 通常リンクの下線を装飾なしにする */
    border-bottom: 1px solid #666666; /* 通常リンクの下線を実線に変える */
    }
    a:hover {
    border-bottom-style: dotted; /* マウスオーバーした時の下線を点線に変える */
    }
    </style>
    </head>
    <body>
    <p><a href="#">リンクテキスト</a>の仕様を変更する方法</p>
    </body>
    </html>

    アンカー(a)タグの規定の装飾を無効にする「text-decoration: none」を指定して、下線の色と線種を「border-bottom」プロパティで指定しています。

    ●ブラウザーの表示(通常のリンクの表示)

    hover5

    マウスオーバー時の表示は「border-bottom-style」プロパティで指定しています。

    ●ブラウザーの表示(マウスオーバー時の表示)

    hover6

    ▲ページトップへ戻る

    1.3. :hoverを使ってマウスオーバー時のリンクテキストの背景を変更する

    次に「:hover」疑似クラスを使ってマウスオーバーした時のリンクテキストの背景を変更するCSSをご紹介します。

    ●hover2.html

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>CSS入門 - :hover の使い方</title>
    <style>
    a {
    text-decoration: none; /* 通常リンクの下線を装飾なしにする */
    border-bottom: 1px dotted #666666; /* 通常リンクの下線を点線に変える */
    }
    a:hover {
    background-color: #31A9EE; /* マウスオーバーした時の背景を変える */
    }
    </style>
    </head>
    <body>
    <p><a href="#">リンクテキスト</a>の仕様を変更する方法</p>
    </body>
    </html>

    アンカー(a)タグの規定の装飾を無効にする「text-decoration: none」を指定して、下線の色と線種を「border-bottom」プロパティで指定しています。通常リンクの下線は点線にしました。

    ●ブラウザーの表示(通常のリンクの表示)

    hover6

    マウスオーバー時のリンクテキストの表示は「background-color」プロパティで色(#31A9EE)を指定しています。

    ●ブラウザーの表示(マウスオーバー時の表示)

    hover6-2

    ▲ページトップへ戻る

    2. 「:hover」疑似クラスを使ってマウスオーバー時の画像を装飾する

    2.1. 画像を透過する

    「:hover」疑似クラスはリンクに適用するだけでなく、通常のテキストや画像に対して指定することもできます。

    ●hover3.html

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>CSS入門 - :hover の使い方</title>
    <style>
    a:hover{
    opacity: 0.6; /*マウスオーバー時に画像を透過する設定 */
    }
    </style>
    </head>
    <body>
    <h1>「:hover」疑似クラスの使い方</h1>
    <a href="cherry1.png"><img src="cherry1.png"></a>
    </body>
    </html>

    ●ブラウザーの表示(通常のリンク画像の表示)

    hover7

    「opacity」プロパティで画像を透過処理しますが、「:hover」疑似クラスを使うとリンクの画像にマウスオーバーした時に透過表示がされます。

    ●ブラウザーの表示(マウスオーバー時の表示)

    hover8

    リンクに指定した画像だけでなく、通常の画像の表示についても使用できます。

    ●hover4.html

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>CSS入門 - :hover の使い方</title>
    <style>
    .sample:hover{
    opacity: 0.6; /*マウスオーバー時に画像を透過する設定 */
    }
    </style>
    </head>
    <body>
    <h1>「:hover」疑似クラスの使い方</h1>
    <img class="sample" src="cherry1.png">
    </body>
    </html>

    「sample」クラスセレクタに「:hover」疑似クラスを指定して、imgタグで指定した画像をマウスオーバーする際に透過処理がされます。

    2.2. 画像を拡大・縮小する

    次にマウスオーバー時の画像を拡大・縮小させるCSSについて見てゆきましょう。

    ●hover5.html

    <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>CSS入門 - :hover の使い方</title>
    <style>
    .sample1 {
    display: inline-block; /* 要素をインラインブロック化する */
    vertical-align: middle; /* 要素のセンタリングを指定 */
    transform: perspective(1px) translateZ(0); /* 要素の表示位置を移動させる */
    transition-duration: 0.5s; /* 変化に掛かる時間を指定する */
    transition-property: transform; /* 変化させるプロパティ名を指定する */
    }
    .sample1:hover{
    transform: scale(1.3); /* 要素の縮尺比率を指定する */
    }
    </style>
    </head>
    <body>
    <h1>「:hover」疑似クラスの使い方</h1>
    <div class="sample1"><img src="cherry1.png"></div>
    </body>
    </html>

    「transform」プロパティで画像の縮尺を指定します。scale()関数に数値を一つ指定すると、X軸とY軸が同じ縮尺率で拡大・縮小されます。X軸とY軸に異なる比率を指定する場合は、scale(X方向の縮尺比率, Y方向の縮尺比率) とカンマ「,」で区切って値を指定します。サンプルコード(hover5.html)では、「transition-duration」プロパティや「」プロパティを使って画像を拡大するのに時間差をもうけて画像がゆっくりと拡大するようにしています。赤い桜の画像の上にマウスを重ねるとゆっくりと画像が大きくなります。サンプルコードを保存して動きを確認してみて下さい。

    ●ブラウザーの表示(マウスオーバー時の表示)

    hover10

    画像だけでなくテキストボタンを拡大・縮小することも可能です。サンプルコードで作成したテキストボタンの上にマウスを重ねると、画像と同じようにボタンもゆっくりと大きくなります。

    ●hover6.html

    <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>CSS入門 - :hover の使い方</title>
    <style>
    .button {
    border: 2px solid #666666; /* ボックスの境界線を実線に指定 */
    border-radius: 3px; /* ボックスの角丸を指定 */
    color: #b20000; /* フォントの色を指定 */
    margin: 30px; /* ボックス外側余白の指定 */
    padding: 6px 12px; /* ボックス内側余白の指定 */
    text-decoration: none; /* リンクを装飾なしに変更 */
    }
    .sample1 {
    display: inline-block; /* 要素をインラインブロック化する */
    vertical-align: middle; /* 要素のセンタリングを指定 */
    transform: perspective(1px) translateZ(0); /* 要素の表示位置を移動させる */
    transition-duration: 0.5s; /* 変化に掛かる時間を指定する */
    transition-property: transform; /* 変化させるプロパティ名を指定する */
    }
    .sample1:hover{
    transform: scale(1.3); /* 要素の縮尺比率を指定する */
    }
    </style>
    </head>
    <body>
    <h1>「:hover」疑似クラスの使い方</h1>
    <p><a href="#" class="button sample1">ボタンの拡大・縮小</a></p>
    </body>
    </html>

    「.buttun」クラスセレクタでは表示するボタンの境界線や色などの装飾を指定しています。実際にボタンの拡大・縮小をするのは「.sample1」セレクタです。マウスオーバー(.sample1:hover)した際に「transform」プロパティで指定の縮尺でボタンが拡大・縮小します。

    ●ブラウザーの表示(マウスオーバー時の表示)

    hover11

    ▲ページトップへ戻る

    月額単価60万円〜70万円
    勤務地 東京都 渋谷区
    年収350万円〜550万円
    勤務地 東京都 千代田区
    月額単価50万円〜60万円
    勤務地 東京都 品川区
    • このページをはてなブックマークに追加

    おすすめ記事

  • ピックアップ

    フリーランス

    【Ruby】サーバーサイドエンジニア★EC在庫管理システムの開発 NEW

    月額単価 :60万円〜70万円

    EC(業種問わず)のリサーチ機能や出荷管理、在庫管理など、販売者の効率化を促進するシステムのサーバ...

    フリーランス

    【JavaScript】Webエンジニア★官公庁DX推進企画サイトの開発

    官公庁DX推進企画サイトについて、追加機能の実装を担当して頂きます。 【具体的業務】 ・マテリア...

    正社員

    【Java】システムエンジニア|Webサービスの設計・開発

    年収 :350万円〜550万円

    【仕事内容】 システムエンジニアとしてWebサービス系、業務系アプリケーションの要件定義、設計、開発...

    株式会社日本ビジネス開発

    フリーランス

    【PHP】サーバーサイドエンジニア★オウンドメディアの構築

    月額単価 :50万円〜60万円

    PHPを用いたオウンドメディア構築支援のサーバーサイド開発を担当して頂きます。 複数案件が並行して...