メニュー項目にカーソルを合わせると背景画像が変わる

Tweet

灰色背景がサンプルソース薄緑背景が実際の見た目

サンプルソース

HTMLソース

CSSソース

背景画像として使用した画像

サンプル表示

解説

HTMLソース

メニューに使うリストにのみ適用させる為、リストにidを指定します。
ここでは、<ol id=”cbgmenu”>としています。

CSSソース

#cbgmenu a:hover {background-image:画像へのパス;}を指定します。
これは、メニュー(id=”cbgmenu”)内にあるリンク(a)の上にマウスカーソルが乗った時(hover)に、background-imageで指定した画像にリンクの背景画像が変わるという意味です。
上のサンプルでは、カーソルが乗った時に「薄いピンク色の市松模様」に変える為に、CSSの#cbgmenu a:hover {background-image:url(menubg.gif);}を指定しています。
ちなみに、背景画像はmenubg.gif部分を他の画像へのパスに変えればOKです。

[参考]相対パスと絶対パス(パスの説明)