ホーム　＞　小技集　＞

ホームページの小技：その３（リンクにカーソルを合わせると文字が変化）

このサイトもそうですがリンクにカーソルを合わせると色が変わったり文字が変化したりしますよね。スタイルシートを使ってお洒落なページにしましょう。

広告

例１）シンプルリンク　　↓サンプル

以下をヘッダ部に記述します（ヘッダが解らない方はとりあえずタイトルの下の行に！）
<STYLE TYPE="text/css"> <!-- A:HOVER{ background-color : #ffd7ff; color : #ff0080; } --> </STYLE>
解説）
background-color : #ffd7ff;　　文字背景色の設定■
color : #ff0080;　　　　　　　　　文字色の設定■

例２）枠付き　↓サンプル

以下をヘッダ部に記述します（ヘッダが解らない方はとりあえずタイトルの下の行に！）
<STYLE TYPE="text/css"> <!-- A:HOVER{ color : #cc00cc; background-color : #ffb9ff; border-width : 1px ; border-style : solid ; border-color : #ff4da6; margin : -1px; } --> </STYLE>
解説）難しいので要所のみ
color : #cc00cc　　　　　　　　　　文字の色■
background-color : #ffb9ff;　　文字の背景色■
border-color : #ff4da6;　　文字枠の色■
その他はレイアウトを崩さないための設定です。あまり触らない方が無難ですよ。

ホーム　＞　小技集　＞