【8/27まで】Udemyの人気コースが今なら1,200円から!!

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

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

この記事では、CSSにおける擬似クラス「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」のスタイルが適用されて背景色が赤色になります。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です