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

2020年8月22日2023年1月22日

この記事では、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;
}