マウスをのせるとリンク文字の色を変化させる

ソース
<style type="text/css">
<!--
a {text-decoration:none;background-color:#ffffff;}
a:hover {background-color:#6666ff;text-decoration:underline;color:#ffffff;}
-->
</style>


サンプル

ここにマウスをのせてください。

今回のポイントはa:hoverの部分です。

最初の a {設定} がマウスをのせる前の設定です。

次の a:hover {設定} がマウスをのせた時の設定です。

設定値の内容は、StyleSheetの設定の仕方と同じです。
今回使用したプロパティの解説を以下に載せておきます。

■text-decoration:文字の装飾です。
  none:装飾なし(デフォルト)
  overline:上線
  underline:下線
  line-through:取り消し線
  blink:点滅(注意!InternetExplorerには対応してません)

■background-color:背景色です。

■color:文字色です。

他にもfont-sizeなど色々なプロパティを組み合わせて、もっと派手にする事も出来ますよ。



▲BACK


IT SOHO CLUB