2012.09.29
css

ホバー時に画像が一瞬消える

マウスオーバーした際に配置した画像をCSSで変えることができます。

a:hover

という疑似クラスを使って変えるのですが、ブラウザで読み込んだ直後にマウスオーバーした際に、ホバーで設定した画像が表示される前に、一瞬ボタンが消えて真っ白になることがあるかと思います。

制作段階ではローカルで作業していたり、またはブラウザのキャッシュ(一時的にブラウザに保存されているファイル)が残っているために気づかないことも多いのですが意外と気になるところです。

ブラウザの更新ボタンでは、画像などはすぐに更新されません。
キャッシュ(一時的に保存されているファイル)から表示しているのです。

Memo:

ブラウザのキャッシュをリセットする(消す)にはキーボードのF5を押します。それでも解決しない場合はこちらに詳しく書かれていますので参考にしてください。

話しがそれましたが、一瞬画像が消える現象を回避する方法です。

まず、通常ホバーを設定するソースから。

画像を下記のように用意してます。

CSSのソース

.btn {
	background:url(画像までのパス/btn.jpg) no-repeat;
	width:190px;
	height:50px;
	margin:0 auto;
}
a:hover .btn {
	background:url(画像までのパス/btn_h.jpg) no-repeat;
	width:190px;
	height:50px;
}

HTMLのソース

<a href="#"><div class="btn"></div></a>

まずはホバーを付けただけでのサンプル。

ホバー時に画像が消えてしまう

このままではマウスオーバー時に画像が消えてしまったりするので、以下のようにソースを追加します。

CSSのソース

.btn {
	background:url(画像までのパス/btn.jpg) no-repeat;
	width:190px;
	height:50px;
	margin:0 auto;
}
a:hover .btn {
	background:url(画像までのパス/btn_h.jpg) no-repeat;
	width:190px;
	height:50px;
}
.btn img {
	display:none;
}

HTMLソース

<a href="#"><div class="btn">
<img src="画像までのパス/btn_h.jpg" />
</div></a>

ハイライトした部分が追加した部分です。

これでマウスオーバー時に画像が一瞬消えてしまうことが回避できます。

ホバー時に画像が消えない

CSSで.btn内の画像を非表示にし、HTMLではホバー時の画像btn_h.jpgを最初から読み込むようにしています。
マウスオーバーする段階ではすでにbtn_h.jpgは読み込まれているということになります。

一瞬空白になってしまう現象は、マウスオーバーされた時に初めて画像を読み込み始めるため、その読み込む時間だけ空白になるということです。

上記の方法だとすでに画像自体はHTMLで読み込んでいる状態で非表示にしているので、空白になることを回避できるわけです。

関連する記事

コメントをどうぞ

技術的なサポート、質問等にはお答えできない場合もございます。
また、現在更新頻度はかなり低めですので、返信できたとしてもかなり遅くなる場合があります。
ご理解くださいませ。


以下のHTMLタグが使えます。
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*


おすすめの本
ネットで調べればなんとかなる!という時代ですが、良い本にめぐり合い、基礎をきっちり固めることで応用がきくテクニックを身に着けることができます。もっと上達したい人におすすめの本をいくつかご紹介します。
TO TOP