擬似クラス[hover][active][focus]の違いと使い方を解説

この記事では、CSSにおける擬似クラス「focus」「hover」「active」の違いと使い方について説明します。

擬似クラス「focus」「hover」「active」の意味
サンプルコード
- 解説

目次へ

擬似クラス「focus」「hover」「active」の意味

擬似クラス「focus」「hover」「active」の意味は以下のようになっています。

擬似クラス意味 :focus 入力可能状態の場合に適用されるスタイル :hover マウスオーバー時に適用されるスタイル :active クリック時、あるいはクリックし続けている間に適用されるスタイル

サンプルコード

input要素とリンク要素を用意しました。挙動を見てみましょう。

See the Pen diff-active-focus by shiakisudev (@shiakisu) on CodePen.

CSS

/* フォーカス時*/ .sample:focus{ background-color:pink; } /* マウスオーバー時*/ .sample:hover{ background-color:yellow; } /* アクティブ時*/ .sample:active{ background-color:red; } 解説

focusの解説

Tabキーなどで要素を選択した場合は「:focus」のスタイルが適用されて背景色がピンク色になります。
input要素の場合は、一度クリックして入力可能状態にした場合でも「:focus」のスタイルが適用されて背景色がピンク色になります。

hoverの解説マウスオーバー時は「:hover」のスタイルが適用されて背景色が黄色になります。 activeの解説クリック時、クリックし続けている場合は「:active」のスタイルが適用されて背景色が赤色になります。

以上で記事の解説はお終い！

HTML、CSS、JavaScriptをもっと勉強したい方にはUdemyがオススメ！同僚に差をつけよう！

【Udemy厳選】2023年HTML、CSS、JavaScriptで人気のオススメ動画コース13選

📎📎📎📎📎📎📎📎📎📎