擬似クラス[hover][active][focus]の違いと使い方の解説
この記事では、CSSにおける擬似クラス「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;
}
以上で記事の解説はお終い！
HTML、CSS、JavaScriptをもっと勉強したい方にはUdemyがオススメ！同僚に差をつけよう！