記事タイトルのロールオーバーの設定を変える

【記事タイトルのロールオーバーの設定を変える】
ロールオーバーとはマウスがそこへ乗ると
変化が生じることを言います。
それを記事タイトルに適用してみましょう。

記事タイトルのロールオーバーを設定するには
/*-----Content-----*/内の
/* Articles */にある

.articles-title a:link{ text-decoration: none; color:#ffffff; }
.articles-title a:visited{ text-decoration: none; color:#ffffff; }
.articles-title a:active{ text-decoration: none; color:#ffffff; }
.articles-title a:hover{ text-decoration: underline; color:#ffffff;}

この部分を追加・変更します。

通常の状態は
a:link（未訪問リンク時＝まだクリックされたことがない）または
a:visited（訪問済みリンク時＝すでにクリックされたことがある）の
どちらかです。
ロールオーバーの状態は
a:hover（マウスが乗っている状態）です。

つまり、記事タイトルの初期設定は
未訪問時リンクおよび訪問済みリンクの文字は白
下線がなしで
ロールオーバー時にはそこに下線が付くというものです。
下の＜記事タイトルのロールオーバーの設定を変える＞を
クリックしてみて下さい。

記事タイトルのロールオーバーの設定を変える


それではタイトルをカスタマイズしてみましょう。
未訪問時のリンクの色をwheat 
ロールオーバーの色をtomatoにしてみます。
下の＜記事タイトルのロールオーバーの設定を変える＞を
クリックしてみて下さい。

記事タイトルのロールオーバーの設定を変える

と変わります。
変更の内容はこの通りです。
.articles-title a:link{ text-decoration: none;color:wheat  ; }
.articles-title a:visited{ text-decoration: none; color:wheat ; }
.articles-title a:active{ text-decoration: none; color:wheat ; }
.articles-title a:hover{ text-decoration: none; color:tomato;}

a:hover内にfont-size（オンマウスで字が大きくなる）
font-family（オンマウスでフォントが変わる）など
今まで登場しているその他のCSS要素も
使用可能ですので、是非お試しください。

タグ：CSS ブログ so-net ロールオーバー カスタマイズ