【CSS入門】hoverとactiveってどう使う？hoverとactiveの使い方を徹底解説

こう言った疑問に答えていきます。
本日の内容は下記です。

• hoverとは？
• hoverの書き方
• activeとは？
• activeの書き方

よくナビゲーションやボタンで、カーソルが要素に触れた時やクリックした時にスタイルが変わったりするのをよく見かけますよね？

実はあれは、CSSの「hover（ホバー）」「active（アクティブ）」と呼ばれる擬似クラスが使われているんです！

そこで本記事では、この「hover」「active」について概要から解説していき、実際の書き方までわかりやすく解説していきます！

では早速やっていきましょう！

【CSS】hover・activeとは？

そもそも擬似クラスとは？

「hover」「active」を解説する前に、そもそも「擬似クラス」とはなにか？と言うと、要素がある状態になった時にスタイルを適用させると言うものが、擬似クラスと呼ばれるものです。
ここで言う「ある状態」と言うのが、先に説明した「カーソルが要素に触れた時」や「要素をクリックした時」が該当されます。
似たものに「擬似要素」とありますが、それぞれ意味が異なるので注意が必要です。

擬似クラスはいくつかありますが、今回はその中でも比較的覚えやすい「hover」「active」について解説していきます。

hoverとは？

hoverとは何かと言うと、「カーソルが要素に触れた時に、スタイルを適用させる擬似クラス」のことを言います。
例えば、ナビゲーションやボタンの要素にカーソルが触れた時に、背景色を変えたりできます。

activeとは？

一方でactiveとは何かと言うと、「クリックした際に、クリックしている要素にスタイルを適用させる擬似クラス」のことを言います。
例えば、ボタンをクリックした時に、あたかもクリックしているようにスタイルを適用させることができます。

ではhover・activeそれぞれの書き方について見ていきましょう！

【CSS】hover・activeの書き方

hoverの書き方

hoverの書き方は、下のように書いていきます。

セレクタ:hover{
  hover時に適用させたいスタイルを記入
}

例えば、ナビゲーションにカーソルが触れた時に、背景色を変更する場合は、下のように書きます。

<ul class="nav">
    <li>Menu1</li>
    <li>Menu2</li>
    <li>Menu3</li>
</ul>

.nav{
    background-color: black;
}

.nav li{
    color:#fff;
    display: inline-block;
    padding: 10px;
}

.nav li:hover{
    background-color: pink;
}

こうすることで、ナビゲーションのli要素「Menu1」「Menu2」「Menu3」にカーソルが触れた時に、背景色が、ピンク色に変化します。
ナビゲーションの書き方はあくまで例なので、必ずしもこれが正しいわけではありません。

では実際にブラウザで確認してみましょう！

このようにhoverを使うと、カーソルが要素に触れた時に、背景色を変更することができるようになります。

では次に「activeの書き方」についてみていきます。

activeの書き方

activeの書き方は、下のように書いていきます。

セレクタ:active{
  クリック時に適用させたいスタイルを記入
}

例えば、ボタンをクリックした時に、背景色を変更する場合は、下のように書いていきます。

<button>ボタン</button>

button:active{
    background-color: pink;
}

こうすることで、ボタン要素をクリックした時に背景色がピンクに色に変化します。

では実際にブラウザで確認してみましょう！

少し分かりにくいですが、このようにactiveを使うことで、クリック時に背景色を変更することができるようになります。

まとめ

今回紹介したのは、「hover」「active」の２つですが、そのほかにも「link」「visited」がありますが、実際に使うことが少ないので、「hover」「active」だけ覚えておけば十分かと思います。

では本日は以上になります。