この記事では、リンクテキストの状態に合わせてスタイルを適用するサンプルコードを載せています。
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]の違いと使い方の解説](https://i0.wp.com/www.zunouissiki.com/wp-content/uploads/2020/08/擬似クラスhoveractivefocusの違いと使い方の解説.png?resize=520%2C300&ssl=1)