■セレクタ／擬似クラス
スタイルシートのなかで、比較的使用頻度が高く実用的なものにリンク部分にマウスポインターを乗せると文字色が変化するとい うのがあります。
ジャバスクリプトで２枚の画像を使ってリンク部分を変化させるということ（スワップイメージ）をしてましたが、スタイルシートでこれを簡単にすることができます。文字色を変化させるだけですが。
スタイルの設定次第では面白い変化を付けることが出来ます。
これは、セレクタの１つの疑似クラスというものですが、要素に対して付けるもので、 状況やタイミングに指定する事が出来ます。
現在ブラウザが対応している疑似クラスはリンクタグ（Ａタグ）に関する４つです。
ただし、ネットスケープでは、<link>以外は対応していません。
ですから、ネットスケープを使用している人の為に<BODY>タグに
<BODY text="#" link="#" alink="#" vlink="#">と文字色を指定するのを忘れずに。
| 疑似クラス | 対象 |
|---|---|
| ：link | Aタグで作られたリンクのうち、まだ参照していないもの |
| ：visited | Aタグで作られたリンクのうち、既に参照したもの |
| ：active | マウスボタンが押されているなどのアクティブな状態の時 |
| ：hover | マウスカーソルが要素と重なっている時 |
下のここからコピーという部分をコピーして貴方のホームページの書類の<HEAD>
〜</HEAD>の間にペーストしてください。
そうすれば、そのページにスタイルが適用されます。
−−−ここからコピー−−−
<STYLE TYPPE="text/css">
<!--
a:link { color: #006600; text-decoration: none;}
a:visited { color: #00CC00; text-decoration: none;}
a:active { color: ##99CC99; text-decoration: none;}
a:hover { color: ##999933; text-decoration: none;}
-->
</STYLE>
−−−ここまでコピー−−−
疑似クラス（リンク部分にマウスポインターを 乗せると文字色が変化する）
- link・ 未参照
a:hover に色々とスタイルを設定したバリエーションです。
フォントサイズを14ピクセルにし、上下に線を引き、背景色を#CCFFCCにし、太字にしてみました。
−−−ここからコピー−−−
<STYLE TYPPE="text/css">
<!--
a:link { color: #006600; text-decoration: none;}
a:visited { color: #00CC00; text-decoration: none;}
a:active { color: #99CC99; text-decoration: none;}
a:hover { color: #999933; text-decoration: underline overline;
font-size: 14px; line-height: 14pt;
font-weight: bold;
background-color: #CCFFCC;}
-->
</STYLE>
−−−ここまでコピー−−−
疑似クラス（リンク部分にマウスポインターを 乗せると文字色が変化する）
- link・未参照
- 作品名
- 第1回「マウスを 乗せて文字色を変化させよう
- 登録日時
- 2007/02/10(土) 20:55
- 分類
- コピーして使えるスタイルシート