画像変更について

質問

いつもお世話になっています。
今回は、マウスオーバーで自動開閉するアコーディオンメニューをli ul liを使って作成しました。
以下がそのソースです。
---------------------html---------------------
<!--menu_1-->
(1)<ul id="slidemenu_sample">
(2)<li class="bottom" >
<a href="○○○" onmouseout="menu_1.hidePopup('menu_1')" onmouseover="menu_1.showPopup('menu_1')">TEST</a>
<!--menu_1 submenu-->
(3)<ul id="menu_1" style="display:none" onmouseout="menu_1.hidePopup('menu_1')" onmouseover="menu_1.showPopup('menu_1')">
(4)<li><a href="○○○">test</a></li>
</ul>
<!--menu_1 submenu end-->
</li>
</ul>
<!--menu_1 end-->
---------------------css---------------------
ul#slidemenu_sample li.bottom {
text-align:center;
background-image : url(bt_floor_bg_up.gif) ;
font-size:15px;
border:none;
}

ul#slidemenu_sample li.bottom a:hover {
color:#ffffff;
text-decoration:none;
background-image : url(bt_floor_bg_down.gif) ;
}
ul#slidemenu_sample li ul li {
background-image : url(bt_menu_bg_off.gif) ;
}

ul#slidemenu_sample li ul li a:hover {
color:#ffffff;
text-decoration:none;
background-image : url(bt_menu_bg_on.gif) ;
}
---------------------------------------------
マウスオーバーで(2)(4)の背景画像をそれぞれの背景画像に変えたいと思っています。
(4)の背景画像は上記のソースで変えれたのですが、(2)の背景画像ををマウスオーバーで変えられません。
CSSで変えられると思うのですが、どうしたらいいのか分からず、詰まっています。助言をお願いいたします。

回答No.1

yyr446 · ベストアンサー

これって、「Slide Menu」
http://hyper-text.org/archives/2006/12/slide_menu_javascript.shtml
ですよね。
「Slide Menu」のjavascript自体は、CSSのhoverに影響与えて無さそうです。
bottomクラスをつけている<li>要素は、各メニュー項目の最後の項目の
識別のためですね。ですから、この例だと
CSSは、
ul#slidemenu_sample li {
text-align:center;
background-image : url(bt_floor_bg_up.gif) ;
font-size:15px;
border:none;
}
ul#slidemenu_sample li a:hover {
color:#ffffff;
text-decoration:none;
background-image : url(bt_floor_bg_down.gif) ;
}
ul#slidemenu_sample li ul li {
background-image : url(bt_menu_bg_off.gif) ;
}
ul#slidemenu_sample li ul li a:hover {
color:#ffffff;
text-decoration:none;
background-image : url(bt_menu_bg_on.gif) ;
}
HTMLは
<ul id="slidemenu_sample">
<li>
<a href="about:blank" onmouseout="menu_1.hidePopup('menu_1')" onmouseover="menu_1.showPopup('menu_1')">TEST</a>
<ul id="menu_1" style="display:none" onmouseout="menu_1.hidePopup('menu_1')" onmouseover="menu_1.showPopup('menu_1')">
<li>
<a href="about:blank">test2</a>
</li>
</ul>
</li>
</ul>
でいいはずです。
後は、画像の対応関係があっているかという事でしょうか？
私の持っている別の画像で試してみたらこのソースでうまくいきましたよ。
ただ、画像のサイズが大きすぎてオーバーフローするような時は、変に
なりました。リピートするような小さな画像で試してみては？

お礼

ありがとうございます。
ソースまで貼っていただいて、助かります。

早々に検証してみたところ、現状で私の理想に近いです。
本当に助かりました。
ありがとうございます。