お世話になっています。
ボタンの画像のロールオーバーを設定しボタンにカーソルがあたったときに画像が切り替わるようしたいのですが、下記コードでうまくいきません。ECCUBEの場合、デフォルトで設定されてるようにchgImgというのを使わないとダメなのか、それとも下記コードが単純に間違っているのかよく分からない状態です。どなたかご教授いただけましたら大変ありがたいです。

◆ブロック編集部分
-------------------------------------------------------
<div id="navi">
<a href="<!--{$smarty.const.SITE_URL}-->"><h2 id="bttoppage"></h2></a>
<a href="<!--{$smarty.const.URL_DIR}--><!--{$smarty.const.USER_DIR}-->about.php"><h2 id="btabout"></h2></a>
<a href="<!--{$smarty.const.URL_DIR}--><!--{$smarty.const.USER_DIR}-->privilege.php"> <h2 id="ureshii"></h2></a>
</div>
--------------------------------------------------------
◆main.css部分
--------------------------------------------------------

#navi {
position:relative;
top:15px;
background-color: #CAD9AA;
padding: 10px 0 0px 10px;
width: 190px;
height: 148px;
}

#navi h2 {
width: 180px;
height: 45px;
padding: 1px 0 0 0 !important;
margin: 0;
}
#bttoppage {
background:transparent url(../img/side/bt_toppage.gif) no-repeat;
}

#btabout {
background:transparent url(../img/side/bt_about.gif) no-repeat;
}
#ureshii {
background:transparent url(../img/side/bt_special.gif) no-repeat;
}

↓ここからが問題の箇所。このコードでいいのかどうか？
#bttoppage a:hover{
background:transparent url(../img/side/bt_toppage_on.gif) no-repeat;
}
以下残りの２つのボタンも同様。
ECCUBE 2.42です。
------------------------------------------------------------

>それとも下記コードが単純に間違っているのか

ソースを見た限り、こちらです。
HTMLとCSSの整合性が取れていませんね；

EC-CUBEの側の問題とか設定ではありませんので、一度、どこかのHTMLとCSSのマニュアルサイトなどで、CSS＋HTMLでのロールオーバー効果のソースを見て比べられるといいですよ。（＾＾）

>tonton様
ご示唆大変ありがとうございます。それが分かっただけでもありがたいです。該当するＣＳＳの書き方が誤りと思うので、頑張ってみます。