[ CSS ] リンクの状態によって表示を変える

スタイルシートを使うと、テキストリンクのアンダーラインを消したり、色を変えたりできます。記述の仕方は、以下のような感じです。

a { text-decoration: underline; }
a:link { color: #8FABBE; }
a:visited { color: #8FABBE; }
a:hover { color: #006699; }
a:active { color: #8FABBE; }

カーソルが乗っているとか、訪問済みとかの状態は、下の表を参考に・・・

a:link 普通の状態
a:visited 訪問済み
a:hover カーソルが乗った時
a:active クリックした時

後で記述したスタイルの方が優先されるので、a、a:link、a:visited、a:hover、a:active の順番で書くようにします。a:hover と a:active が逆になると、a:active が表示されません。

あるクラス(例の場合は menu)の中の A 要素だけに適用させたい場合は、

.menu a { text-decoration: underline; }

などと記述します。

やりすぎると、訪問済みリンクを普通のリンクと同じ色にしてしまうと、どこのページを見たかわからない。とか、アンダーラインがないと、リンクだと気付いてくれない。など人によっては使いにくいサイトになってしまいます。ご注意を・・・。

参考:リンクのスタイル

コメントを残す

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