オンマウス時の画像表示がおかしい

質問

作成中のホームページのボタン表示を
左側に縦に10個ほどな食べ
CSSを使用してマウスを乗せた時にJPG画像を切り替えるように
していますが、マウスを乗せた時に
本来表示されないはずの画像ボタンが一瞬表示されてしまいます。
トップページボタンの上にマウスを乗せたあとマウスをサイトマップボタンの
上に移動するとまたトップページの画像が一瞬表示されてしまう
どうやら直前に表示した画像が表示されているみたいです
どうしたらこの不具合が解消できるのでしょうか？
どなたかお力添えお願いいたします

HTML
<div id="navibar">
<ul>
<li>
<div id="btn00"><a href="index.html">Top</a></div>
</li>
<li>
<div id="btn01"><a href="contents.html">システム</a></div>
</li>
<li>
<div id="btn02"><a href="ryoukin.html">料金</a></div>
</li>
<li>
<div id="btn03"><a href="shiryou.html">資料請求</a></div>
</li>
<li>
<div id="btn04"><a href="privacy.html">プライバシーポリシー</a></div>
</li>
<li>
<div id="btn05"><a href="hyouji.html">会社概要</a></div>
</li>
<li>
<div id="btn06"><a href="sample.html">サンプル</a></div>
</li>
<li>
<div id="btn07"><a href="merit.html">メリット</a></div>
</li>
<li>
<div id="btn08"><a href="yougo.html">専門用語</a></div>
</li>
<li>
<div id="btn09"><a href="syoukai.html">紹介制度</a></div>
</li>
<li>
<div id="btn10"><a href="map.html">サイトマップ</a></div>
</li>
</ul>
</div>

CSS
#navibar #btn00 a {
height: 28px;
width: 180px;
display: block;
text-indent: -9999px;
background-image: url(btntop.jpg);
margin-bottom: 1px;
}

回答No.2

4017B · ベストアンサー

<style type="text/css">
div#navibar > a {
display: block;
margin: 1px;
padding: 1px;
height: 28px;
width: 180px;
background-image: url('btn_bgoff.jpg');
}

a#btn00:hover {
background-image: url('btn_bgon00.jpg');
}
a#btn01:hover {
background-image: url('btn_bgon01.jpg');
}
a#btn02:hover {
background-image: url('btn_bgon02.jpg');
}
</style>

<div id="navibar">
<a href="aaaa.html" id="btn00">リンク0</a>
<a href="bbbb.html" id="btn01">リンク1</a>
<a href="cccc.html" id="btn02">リンク2</a>
</div>

考え方としてはこんな感じかな…？？

お礼

回答ありがとうございます。
質問時にＣＳＳのコード部分で
漏れがありました。

#navibar #btn00 a:hover {
display: block;
background-image: url(btntop1.jpg);

ＣＳＳ部分では問題ないこと確認できました。

結果報告としまして
ナビボタンの右隣にＪａｖａｓｃｒｉｐｔで動かす画像がありまして
その部分を削除したら直りました。

なぜＪａｖａを使用するとこのような現象が起こるか判りませんが
今後はＪａｖａを使用しない方向で行きたいと思います。

回答No.1

noname#100277

javascriptでonmouseで実行する内容なのでは？
私はjavascriptはユーザビリティの観点からはお勧めしませんが。

お礼

回答ありがとうございました。

ナビボタンはＪａｖaで動かしていませんが
右隣の画像をＪａｖaで動かしておりましたので
もしやと思いＪａｖa画像を削除したら直りました。
なぜＪａｖaを使用すると周りの動作環境に影響するのか
原因は解りませんが、とりあえず修正できました。
本当にありがとうございました。