CSSで訪問済みやホバー時のリンク色を変えるテクニックまとめ

リンクの色はデフォルトだとブラウザ固有のものが使われます。

あるいはWordPressなどのCMSを使っているなら、テーマとかで統一された色です。

でも一部のリンクではホバー時や訪問済みの色を変えたいこともありますよね。

そこでここではCSSだけでリンク色を変えるテクニックについてまとめました。

訪問済みのリンク色を変える

訪問済みリンク色はデフォルトだと青紫みたいな色

この色を変えるには :visited  疑似クラスを使います。

その名の通り訪問済み(visited)な要素に対してCSSを適用するクラスです。

 

例えば次のようなリンクタグを作ったとしましょう。

分かりやすく link  というクラス名をつけてます。

 

このリンクに対して訪問済みの色をカスタマイズしているのが次のCSS

.link:visited  のようにセレクタの後に疑似クラスをくっつけるだけです。

これで訪問済みのリンク色がデフォルトから purple  になります。

ホバー時のリンク色を変える

マウスなどがホバーしたときのリンク色はデフォルトだと青

このホバー時の色を変えるには :hover  疑似クラスを使います。

使い方は先ほどの:visited疑似クラスと全く同じです。

 

例えば次がホバー時のリンク色を darkblue  に変更しているCSS例

これだけでホバー時にリンク色が指定した色に変わります。

 

ただし1つ注意すべきことがあるとすれば

:hover疑似クラスは:visited疑似クラスより後に書いた方がいい

ということ

 

例えば次のようなCSSを書いたとしましょう。

もしリンクが訪問済みだった場合、ホバーするとリンク色は purple  になります。

:hover  を先に書いてしまったのでvisitedに上書きされてしまう訳です。

 

なのでそれを回避するには :hover は :visited の後に書くようにしましょう。

これでホバー時と訪問済みの両方のリンク色が反映されるようになります。

jQueryからリンク色を変えるには?

ここまでCSSのみでリンク色を変える方法について紹介しました。

ちなみに同じことはjQueryを使っていてもできます。

 

ただし次のように直接疑似クラスを指定するのはダメです。

そもそもjQueryでは疑似クラスはサポートされてないので、こういう書き方はNG

 

なのでjQuery側で疑似クラスを扱うには少し工夫が必要です。

そのテクニックについては次でまとめました。

もしどうしてもjQuery側で疑似クラスを使いたいなら、この手法が役立つと思います。

リンク・ボタンのカスタマイズ関連記事

ここで紹介したCSSみたいに、リンク・ボタンのカスタマイズ頻度は多いです。

なので最後に、役立つリンク&ボタンのカスタマイズ術を関連記事で紹介します。

 

特にデザイン関係で役立つのは、次記事で紹介したテクニック

手順もほんの少しのCSSを追加するだけ。簡単にできるので是非お試しください。

ここまでのまとめ

  • 訪問済みリンク色を変える
    リンクセレクタに対して :visited  疑似クラスを指定
  • ホバー時のリンク色を変える
    リンクセレクタに対して :hover  疑似クラスを指定
    ただし訪問済みと併用する場合は !important  を使用

デフォルトとは違ったリンクを作りたいときに役立つと思います。

以上CSSでリンク色を変えるテクニックについてまとめました。

CSS

Commentsこの記事についたコメント

コメントを残す

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

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください