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

灰色背景がサンプルソース

サンプルソース

HTMLソース

<ul id="menu">
<li><a href="http://www.yahoo.co.jp">Yahoo!JAPAN</a></li>
<li><a href="http://www.google.co.jp">Google</a></li>
</ul>

CSSソース

#menu a:hover {background-image:url(menubg.gif);}

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

サンプル表示

→メニュー項目にカーソルを合わせると背景画像が変わる(サンプル)

解説

HTMLソース

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

CSSソース

#menu a:hover {background-image:画像へのパス;}を指定します。
これは、メニュー(id="menu")内にあるリンク(a)の上にマウスカーソルが乗った時(hover)に、background-imageで指定した画像にリンクの背景画像が変わるという意味です。

上のサンプルでは、カーソルが乗った時に「薄いピンク色の市松模様」に変える為に、CSSの#menu a:hover {background-image:url(menubg.gif);}を指定しています。
ちなみに、背景画像はmenubg.gif部分を他の画像へのパスに変えればOKです。

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