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

ソース

<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