スタイルシートを変更する方法

ポインタがリンクの上に乗るとリンク色が変わる、スタイルシートで変更する方法　　http://what.toriichi3.com/zatugaku3.html

　ポインタがリンクの上に乗るとリンク色が変わる方法・２
　　　スタイルシートを変更する方法

今度は、ポインタがリンクの上に乗るとリンク色が変わる設定の方法です。

テキストリンクの下線を消したのはいいが、テキストとテキストリンクの差が
わかりずらくなってしまった。　　　・・・うぅ～ん？

見た目差がなく・・・ポインタがテキストリンクの上に行った時だけ、
ポインタ表示が、　←　から　

　に変わるだけになって、
いまいちわかりずらいので、テキストリンクの上にポインタがいったら
テキストリンクの色が変化するようにしてみた。

教えてGooにありましたので、コレを参照させてもらいました。

　　”スタイルシートを変更する方法です”

HTML をテキストエディタで開き、

<head>～</head>　内に、

下記①　の

<style type="text/css">
a:link { color:blue; text-decoration:none; }
a:visited { color:green; text-decoration:none; }
a:active { color:red; text-decoration:none; }
a:hover { color:pink; text-decoration:none; }
</style>

を入れて、好きな色に変更してください。

①　文字の色だけを変えたいとき
　　 a:hover { color:pink; text-decoration:none; }　

<style type="text/css">
a:link { color:blue; text-decoration:none; }
a:visited { color:green; text-decoration:none; }
a:active { color:red; text-decoration:none; }
a:hover { color:pink; text-decoration:none; }
</style>

その他文字の色と一緒に、
下記の②～⑤の設定を変更したい場合、別途各番号の

<style type="text/css">
　～
　～
　</style>

を入れて変更してください。

②　背景色を変えたいとき　　（５行目を変更する）
　　　a:hover { background-color:yellow; color:black; text-decoration:none; }

<style type="text/css">
a:link { color:blue; text-decoration:none; }
a:visited { color:green; text-decoration:none; }
a:active { color:red; text-decoration:none; }
a:hover { background-color:yellow; color:black; text-decoration:none; }
</style>

③　太字にしたいとき　　（５行目を変更する）
　　　　a:hover { yellow; color:black; font-weight:bold; text-decoration:none; }　

<style type="text/css">
a:link { color:blue; text-decoration:none; }
a:visited { color:green; text-decoration:none; }
a:active { color:red; text-decoration:none; }
a:hover { yellow; color:black; font-weight:bold; text-decoration:none; }
</style>

④　文字に下線を入れたいとき　　（５行目を変更する）
　　　　a:hover { color:pink; text-decoration:underline; }　

<style type="text/css">
a:link { color:blue; text-decoration:none; }
a:visited { color:green; text-decoration:none; }
a:active { color:red; text-decoration:none; }
a:hover { color:pink; text-decoration:underline; }
</style>

➄　文字の上下にラインを入れたいとき　（５行目を変更する）
　　　a:hover { color:pink; text-decoration:underline overline; }　

<style type="text/css">
a:link { color:blue; text-decoration:none; }
a:visited { color:green; text-decoration:none; }
a:active { color:red; text-decoration:none; }
a:hover { color:pink; text-decoration:underline overline; }
</style>

工夫すれば他にも色々できますよ。

ちなみに、

a:link	：リンクの標準の状態。（クリックしたことがなく、マウスが乗ってない状態）
a:visited	：クリックしたことがあるリンクの状態。
a:active	：フォーカスがあたっているか、クリックしているときの状態。
a:hover	：リンクにカーソルが載っているときの状態です。