背景画像をhoverで切り替える時に読み込みで一瞬消えないようにする方法【html】

背景画像をhoverで切り替える時に読み込みで一瞬消えないようにする方法【html】

2015.10.07

2269 view

WEB製作でナビボタンなどを背景画像でhoverでオンオフを切り替えるコーディングを行うことは多いと思います。

ただ、この背景画像を切り替えるコーディングには注意が必要です。

それは以下のような2枚の画像を用いて行った場合に起こる問題があります。

 

hover01

 

この2つの画像A、Bを用意してCSSで「hover」プロパティで切り替えた場合にhover用の画像はhoverの際に読み込むため一瞬画像が消えてしまいます。

 

おそらくCSSのコードは以下のようになっています。

 

 

0コンマ何秒のことなのですが、意外と気になるものです。

 

 

 

 

 

この問題はとても簡単に解決できます。

 

 

 

 

その方法は以下のように画像を1つにするだけです。

 

hover02

 

そしてその画像を以下のCSSのように「background-posishon」プロパティで切り替えます。

 

 

こうすれば、画像がマウスオーバーで消えることもなくスムーズにON・OFFを切り替えることができますよ。

 

以上です。

コメント

  • まだ書き込みはありません

コメントを残す




背景画像をhoverで切り替える時に読み込みで一瞬消えないようにする方法【html】