aタグにCSSのhoverを指定して動きのあるリンクを作る方法!

2024.01.03
aタグにCSSのhoverを指定して動きのあるリンクを作る方法

「hoverを使ってaタグに動きを加えたい」
「hoverのような擬似クラスの使い方について知りたい」

上記のように考えている方もいるのではないでしょうか?

aタグにhoverを指定することでさまざまな動きを加えることができます。使い方も簡単なのでプログラミング初心者でもすぐに使いこなせるようになりますよ。

今回WEBCAMP MEDIAでは、aタグにCSSのhoverを指定して動きのあるリンクを作る方法について解説します。

  • hoverとは
  • hoverの使い方
  • ボタンを作る方法
  • hoverを無効化する

以上の項目について解説します。

この記事を読むことで、aタグにhoverを指定して動きを加える方法について理解できるので、ぜひチェックしてみてくださいね!

hoverとは?特徴と役割を解説

hoverとは、指定したHTML要素にカーソルが乗ったときにCSSを実行できる擬似クラスです。

擬似クラスとは、指定した要素の状態が変化したときにCSSを実行するセレクタで、hover以外にも複数存在します。

hoverを使うことで、カーソルに乗ったときに要素の色を変えたり動きを加えることが可能です。

たとえば、aタグにhoverを指定することで、リンクにカーソルが乗ったときに色を変えてクリックできるということを認識できます。

hoverを使うことで、ユーザーがリンクと認識しづらくいテキストリンクの問題解決につながります。

aタグに利用できるhover以外の擬似クラス

擬似クラスはhover以外にも下記のような種類があります。

  • link:リンクにまだ訪問されていないときのCSSを指定
  • visited:リンクに訪問済みの場合CSSを適用
  • active:指定した要素がクリックされたときにCSSを適用する

aタグには、デフォルトでactiveという擬似クラスが設定されており、クリックされたときに文字色が変わります。

aタグにhoverを指定して動きを加える方法

aタグにhoverを指定して文字色を変える方法と、マウスカーソルを変える方法について解説します。

文字色を変える

hoverを指定したaタグにcolorプロパティを指定することで、カーソルが当たったときの文字色を指定できます。

hoverを使って、カーソルが当たったときの文字色を赤にする方法を例に解説していきます。

サンプルコード

HTML

<body>
  <a href="#">テスト</a>
</body>

CSS

a:hover{
  color:red;
}

hoverはCSSを実行したいセレクタの後ろに「:hover」と指定します。

サンプルコードでは、aタグのセレクタにhoverを指定し「color:red」で文字色を赤色にしています。

マウスカーソルの形状を変える

マウスカーソルを変えるにはhoverを指定したaタグに「cursor: pointer;」を入力します。

cursorはマウスカーソルの形状を設定できるプロパティで、値にpointerを指定することで指差しの形に変更できます。

サンプルコード

HTML

<body>
  <a href="#">テスト</a>
</body>

CSS

a:hover{
  cursor: pointer;
}

aタグとhoverを使ってボタンを作る方法

aタグで作ったボタンにhoverを指定することで、ユーザーがボタンだと認識しやすいデザインを作成できます。

サンプルコード

HTML

<body>
  <div class="button">
    <a href="#">テスト</a>
  </div>
</body>

CSS

.button{
    margin:20px;
}
a{
    color:white;
    background-color: skyblue;
    padding:15px 40px;
    border-radius: 15px;
    text-decoration: none;
}
a:hover{
    color:skyblue;
    background-color: white;
    border:3px solid skyblue;
}

「text-decoration: none;」は、aタグにデフォルトで設定されている下線を無効化しています。

border-radiusプロパティを使ってボタンの角に丸みを加えています。

実行結果

実行結果

aタグに指定している文字と背景色をhoverしたとき逆の色を指定することで、カーソルを当てたことが分かりやすくなります

hoverの処理を無効化する方法

hoverの処理を無効化するには「pointer-events: none;」を使います。

pointer-eventsは、要素にカーソルを当てたりクリックしたりするマウスイベントを操作するCSSプロパティで、値にnoneを指定するとマウスイベントを無効化できます。

サンプルコード

    a:hover{
      color:red;
    }
    a{
      pointer-events: none;
    }

上記コードでは、aタグに「pointer-events: none;」を指定することでhoverに指定した「color:red;」を無効化しています。

注意点
「pointer-events: none;」はhoverだけでなくリンククリックも無効化するので、その点を考慮して利用しましょう。

まとめ

今回は、aタグにCSSのhoverを指定して動きのあるリンクを作る方法について解説しましたが、いかがでしたでしょうか?

aタグにhoverを指定すると、カーソルが乗ったときにリンクの色を変えたりマウスポインター仕様にできるので、ユーザーが利用しやすくなります。

hoverを無効化したいときは「pointer-events: none;」を使うことで無効化できますが、リンク機能も使えなくなる点に注意しましょう。

ぜひ参考にしてみてくださいね!

\プログラミングスクールを比較/

DMM WEBCAMP

COACHTECH

RUNTEQ

DMM WEBCAMP COACHTECH RUNTEQ
目指せる姿 WEBエンジニアへの転職
フリーランスエンジニア WEBエンジニアへの転職
分割払い
補助金 ×
転職保証 × ×
受講期間 12週間〜 3ヶ月〜 5ヶ月〜
特徴 【IT業界の転職を一番に考えたい方向け】
大手DMMが運営のプログラミングスクール
転職成功率98.8%
豊富なキャンペーンや補助金制度あり
【フリーランスを目指したい方向け】
フリーランスのエンジニアを最短で目指す
エンジニアと共に実際の案件開発を担当
【とことん勉強してから転職したい方向け】
1,000時間(約9カ月)のカリキュラムでしっかり勉強
企業の求める即戦力のWEBエンジニアを目指す
料金 329,350円〜
※給付金適用後
42万9,000円~ 55万円

公式HP

公式HP

公式HP

関連記事

資料請求

  • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

    DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

    資料をダウンロードする
  • IT技術がもたらす3つの変化と身につけるべきスキル

    IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

    資料をダウンロードする
  • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

    働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

    資料をダウンロードする

© 2024 WEBCAMP MEDIA Powered by AFFINGER5