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

a要素のリンクテキストの状態に合わせてスタイルを適用する方法

a要素のリンクテキストの状態に合わせてスタイルを適用する方法

この記事では、リンクテキストの状態に合わせてスタイルを適用するサンプルコードを載せています。

MEMO
わかりやすく背景色を変えるようにしています。

See the Pen
taga
by shiakisudev (@shiakisu)
on CodePen.

CSS

/* デフォルト時 */
a{
  background-color:blue;
}
/* デフォルト時 */
a:link{
  background-color:blue;
}
/* リンク先訪問時 */
a:visited{
  background-color:pink;
}
/* マウスオーバー時 */
a:hover{
  background-color:green;
}
/* クリックしている状態の時 */
a:active{
  background-color:red;
}
注意
疑似クラスをこの順番で定義しないと意図したとおりにスタイルが適用されないので注意が必要です。
hover、active、focusを使う場合は以下の記事もご参照ください。
擬似クラス[hover][active][focus]の違いと使い方の解説 擬似クラス[hover][active][focus]の違いと使い方を解説

コメントを残す

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