CSSでマウスオン画像表示のもたつきを解消する方法
メモ。
http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1113226166
より。
ナビゲーション画像のマウスオン・アウトの表示切り替えをCSSで行う場合、表示がもたつく(タイムラグがあるというか、表示に時間がかかることがある)。その回避方法。
・通常時とオンマウス時両方の画像を一つの画像にし、オンマウス時にbackgroundの背景位置をずらす。
a {background:url(同じ画像) 0px 0px no-repeat;}
a {background:url(同じ画像) 0px -100px no-repeat;}・空要素を作り、そこに背景画像として読み込ませておく。
div.preload {
background:url(オンマウス画像1);
background:url(オンマウス画像2);
background:url(オンマウス画像3);
}
これみんなどうしてるんだろう???と思っていたのですが、こういうことだったのか。
そういえばなんか本に、ナビゲーションのマウスオン・アウト画像がひっついた画像を使ってるのがあって、なんだコレ?と思ってたんですが、なるほど…。
とりあえず空要素でやってみました…。
グッジョブだったらポチッと→