色が変わるナビゲーターを作ろう
ナビゲーター（メニュー）にマウスを乗せた時、色が変わったり、背景画像が変わったりするロールオーバー効果を作ってみましょう。「スタイルシートの編集方法」のとおり、スタイルシート編集ページを開いてください。
- 画像ファイルを使用する場合は、公開サーバーに転送しておく必要があります。（「画像ファイルを挿入しよう」参照）画像ファイルの指定は「url(画像ファイル・パス)」のように記述します。画像ファイル・パスは、スタイルシート・ファイルがあるディレクトリからの相対パスか、http:// からはじまる絶対パスで指定します。
- 背景色が変わるロールオーバー効果を追加するには、「a:hover」にマウスが乗ったときの色を指定します。罫線や文字色も変えることができます。
#mainmenu ul li a
{
...
background-color: #ccccff;
border: 1px outset blue;
...
}
#mainmenu ul li a:hover
{
...
background-color: #ffcccc;
border: 1px outset red;
...
} - 背景画像が変わるロールオーバー効果を追加するには、「a:hover」にマウスが乗ったときの画像を指定します。
#mainmenu ul li a
{
...
background-image: url(img/navi_bg.gif);
...
}
#mainmenu ul li a:hover
{
...
background-image: url(img/navi_bg_hover.gif);
...
}
↓動画によるロールオーバー効果の設定例です。クリックで再生します。