背景置換でのナビゲーショントラブル？

質問

CSSを勉強中です。
本などを読みながらおもしろいいろいろなCSSでの表現を楽しんでいます。

CSSのtext-indent:-9999pxなどの指定で背景画像置換を利用して
ナビゲーションなどの項目に、反映されているのを見かけるで
私も今回、真似て作成してみました。

ナビゲーションなどの項目に反映し、感動してはいたのですが
私の作成した同じ仕様のモノだと、マウスオーバーしたときに
画像を呼び出すのが遅いのか、一瞬何も表示されない瞬間があります。

ページをロードしたときにまず画像を呼び出すというような指定が必要なのか、
もしくはそもそもそういうモノなのかということがわかりません。
実際に同じCSSのtext-indent:-9999pxで
ナビゲーション表現をされているいろいろなサイトを拝見させていただいても、
問題なくきちんと画像置換がされているのか、そういう指定がきちんとなされているのか
その一瞬の「何も表示されない瞬間は」ないのです。

言葉の表現がへたくそで申し訳ありませんが、
どなたかお知恵をお貸しいただけませんでしょうか。
よろしくお願いします。

回答No.1

miya_00 · ベストアンサー

パソコンが重いとマウスオーバー時の反応も遅くなりますので、その間何も表示されないって現象だと思いますね。

これの対応としまして自分がしている事なんですが、
bright1976さんがtext-indentを使ってのロールオーバーをしているって事はCSSで
aタグ内をdisplay: block;にしbackgroundで背景画像を指定していると思うんですが、仮に下記ソースで作っていると過程しますね。

<ul id="navi">
<li class="aaa">～</li>
<li class="bbb">～</li>
<li class="ccc">～</li>
</ul>

こうなっていれば、各class（aaa、bbb。ccc）のaタグに各画像を指定していると思うですが、#idにロールオーバー前の一枚画像を指定しておくんです。

そうすれば、一瞬消えるのはなくなるはずですよ。

お礼

miya_00様

お返事がおそくなり申し訳ありません！
仰る通りのソースで実験していました！！

一つのボックス自体に完成系の背景を置いておくということですね。。。
試してみます！！

ありがとうございます！！！！