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

    公開日:2017年01月11日 最終更新日:2021年12月24日

    疑似クラスの「: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万円
    勤務地 東京都 千代田区
    月額単価60万円〜70万円
    勤務地 東京都 千代田区
    月額単価60万円〜70万円
    勤務地 東京都 千代田区
    月額単価70万円〜
    勤務地 東京都 渋谷区

    フリーランスの方でこのようなお悩みありませんか?

    • 定期的に案件を紹介してほしい
    • 完全フルリモートワークや、週1出勤など、働き方を選びたい
    • 単価交渉など営業周りが苦手なので、誰かに任せたい

    プロエンジニアにお任せください!

    プロエンジニアはほとんどEND直案件!高額単価案件ならお任せください。
    完全フルリモートや、週1出勤など、希望に合わせた働き方ができる案件を多数ご用意しています。
    単価や契約交渉などは弊社キャリアコンサルタントに全てお任せください。

    無料登録して、あなたの希望に合った案件をチェック!

    簡単60秒!無料登録はこちらから

    おすすめ記事

  • ピックアップ

    フリーランス

    NEW 【Java】フルスタックエンジニア★バーコード決済アプリの開発

    大手企業の受託開発をメインに展開している企業にて、Javaエンジニアを募集いたします。 大手小売業顧...

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

    フリーランス

    【Java】システムエンジニア★CMS製品を利用した社内ポータルサイト構築

    大手企業の受託開発をメインに展開している企業にて、Java エンジニアを募集いたします。 Azure AD に...

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

    フリーランス

    【Java】フルスタックエンジニア★金融系営業支援システムの改善

    大手企業の受託開発をメインに展開している企業にて、Javaエンジニアを募集いたします。 金融系の勘定...

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

    フリーランス

    【Ruby/React/Node.js】フルスタックエンジニア★動画配信プラットフォームの開発

    動画配信プラットフォームを提供する企業にて、Ruby / React、Node.js のフルスタックエンジニアとして...

    月額単価:70万円〜

SCROLL TOP