マウスがリンク文字上に乗ったらリンク文字の色を個別に変える |
Internet Explorer | Netscape Navigator | iCab | Safari | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
3.0x | 4.0x | 4.5 | 5.0x | 5.5 | 6.0 | 2.0x | 3.0x | 4.x | 6.0 | 7.0 | 2.x | 1.0 | 1.1 | |
Windows | × | ○ | - | ○ | ○ | ○ | × | × | × | ○ | ○ | - | - | - |
Macintosh | × | ○ | ○ | ○ | - | - | × | × | × | ○ | ○ | × | ○ | ○ |
UNIX | - | - | - | - | - | - | × | × | × | ○ | ○ | - | - | - |
ポイント | a.type1 { color:blue; } a:hover.type1 { color:red; } a.type2 { color:blue; } a:hover.type2 { color:orange; } |
---|---|
説 明 | マウスがリンク文字上に乗ったら文字色を個別に変えるにはクラス指定を使います。まず、:hover擬似プロパティとcolorプロパティを使い色指定をします。スタイルの定義部分でa.クラス名 { color: 文字色 }、a:hover.クラス名 { color: 文字色 }のようにします。指定色はカラー名またはカラーコード(#rrggbb, #rgbなど)で指定します。個別に色を変えたい数だけクラス指定を行います。 |
サンプル | <html> <head> <title>マウスがリンク文字上に乗ったらリンク文字の色を個別に変える</title> <style type="text/css"><!-- a.type1 { color:blue; } a:hover.type1 { color:red; } a.type2 { color:blue; } a:hover.type2 { color:orange; } --></style> </head> <body> <a href="http://www.openspc2.org/" class="type1">OpenSpace(type1)</a><br> <a href="http://www.yahoo.co.jp/" class="type1">Yahoo(type1)</a><br> <a href="http://www.google.com/" class="type2">Google(type2)</a><br> <a href="http://www.infoseek.co.jp/" class="type2">Infoseek(type2)</a><br> </body> </html> |
補足説明 | なし |
■サンプルを実行する >>実行 ■各ブラウザでの動作結果を見る >>View! |