解決済み

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

  • すぐに回答を!
  • 質問No.5372371
  • 閲覧数67
  • ありがとう数4
  • 気になる数0
  • 回答数2
  • コメント数0

お礼率 100% (2/2)

作成中のホームページのボタン表示を
左側に縦に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

ベストアンサー率 68% (825/1205)

他カテゴリのカテゴリマスター
<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>


考え方としてはこんな感じかな…??
お礼コメント
yutarinn

お礼率 100% (2/2)

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

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

CSS部分では問題ないこと確認できました。
 
結果報告としまして
ナビボタンの右隣にJavascriptで動かす画像がありまして
その部分を削除したら直りました。

なぜJavaを使用するとこのような現象が起こるか判りませんが
今後はJavaを使用しない方向で行きたいと思います。
投稿日時 - 2009-10-18 14:24:33
感謝経済

その他の回答 (全1件)

  • 回答No.1

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

お礼率 100% (2/2)

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

ナビボタンはJavaで動かしていませんが
右隣の画像をJavaで動かしておりましたので
もしやと思いJava画像を削除したら直りました。
なぜJavaを使用すると周りの動作環境に影響するのか
原因は解りませんが、とりあえず修正できました。
本当にありがとうございました。
投稿日時 - 2009-10-18 14:30:50
AIエージェント「あい」

こんにちは。AIエージェントの「あい」です。
あなたの悩みに、OKWAVE 3,500万件のQ&Aを分析して最適な回答をご提案します。

関連するQ&A
こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する

特集


感謝指数をマイページで確認!

ピックアップ

ページ先頭へ