リンクにマウスを合わせるとリンクの背景の色が変わるように変更

★ 今回は『リンクにマウスを合わせるとリンクの背景の色が変わるように変更』です。

先日、ちょっとCSSの一部を変更しました。

変更点は、記事タイトルにマウスを合わせたときに
表示が広がって見えるようになっていたのですが、
この部分をマウスを合わせたときにリンクのバックの色が変わるように変更しました。

あと、関連エントリーの表示の仕方も同様に変更しました。

解説するまでのこともないと思いますが、とりあえず方法を解説。

このブログの、記事部分のCSSは大体以下のようになっています。

a:link,a:visited {color: #252525;text-decoration: none;}
a:hover,a:active {background-color:#cae1ff;color: #252525; text-decoration: none;}

未訪問リンクはa:link、
訪問済みリンクはa:visited、
カーソルが重なった時のリンクはa:hover、
アクティブになった時のリンクはa:activeです。

上のCSSの書き方では、
未訪問リンク、訪問済みリンクは、下線なしの表示。
カーソルが重なった時のリンク、アクティブになった時のリンクは、
下線なしで背景を色をつけるようにしています。
#252525は文字色の指定です。

たったこれだけのことで、マウスを載せたときに背景色が変わるようになります。

非常に簡単な技なので、
ちょっとインパクトを与えたいとき、
デザインに変化を与えたいとき、
ユーザビリティーを考えてわかりりやすくしたいとき等に使ってみてはいかがでしょうか？
人気ブログランキング

ブログ内関連タグ : ブログ カスタマイズ スタイルシート