CSS：ホバー状態イメージキャッシュ

Question

ホバー状態を定義するとCSS ... &がホバー状態になりますbackground:url('image path');この画像はプリロードされますか？要素の最初のホバーでダウンロードされます。あなただけのホバー状態の画像を避けるためにしようとしているならば、...仕事に

Answer 1

を使用することができますそれらをプリロードするのではなく、通常のイメージとホバーイメージの両方を保持するスプライトを作成しないのはなぜですか？こうすることで、すべてのホバー状態イメージが既にロードされていることを確認すると同時に、すべてのリクエストのオーバーヘッドを減らすことができます。あなたが次に行う必要があるのは、background-position属性の値を設定することだけです。

あなたの最初の質問では、答えを見つける最も良い方法は2つの大きな画像を使用することです（2つの壁紙が機能します）。自分でテストします。マウスが元の画像を上回っているのは、コードが実行されているからです。

希望すると便利です。

Answer 2

に起こっていることをどのようにそれをプリロードする...私は、画像をプリロードするJavaScriptを知っている..あなたはcss sprites

Answer 3

divの高さが20pxで、ホバーで背景画像を変更したい場合は、ノーホバーとホバーグラフィックの両方の画像を使用し、上にホバーなしの画像を使用し、ホバーイメージは下部にあります。両方の部分はdivの高さでなければなりません。この場合、20ピクセルです。次に、CSS background-positionを0px 0px（左上）に設定します。これはデフォルトです（ホバーなし）。

ユーザーがdivの上に移動した場合は、background-positionを0px -20px（20ピクセルアップ）に設定します。これにより、背景画像が20ピクセル上に移動し、スプライトの下半分が表示されます。これはホバーグラフィックです。マウスがdivから削除されると、スプライトは元の位置に戻ります。

CSS：

 
.hoverDiv   /* Normal state */ 
{ 
    background: url('images/img.png'); 
    background-position: 0px 0px; 
} 

.hoverDiv:hover /* Hover state */ 
{ 
    background-position: 0px -20px;  /* Move background up by 20px, hiding the top image */ 
} 

あなたが異なる高さのdivを持っている場合は、単にdiv要素の高さと20pxビットを変更します。

スプライトがお互いの上に並んでいない場合は、0px -20px;の代わりにbackground-position: -20px 0px;を使用してX軸を移動します。もちろん、バックグラウンドも積極的に動かすことができます。

希望これを行うための最善のことは、CSSスプライトを使用している

ジェームズ

Answer 4

、役立ちます。スプライトシートは、内部にたくさんの画像がある大きな画像で、サイトで使用されます。どのようなメリットがありますか？つまり、すべての画像をダウンロードするために1つのhttp要求が送信されるだけです。したがって、サイトの読み込みを少し速くする。

本当にホバー効果でうまくいくでしょう！

シンプルなコードに加えて、使用する方がずっと簡単です。 JavaScriptのように、面倒な恐ろしいコードではありません。学ぶのはとても簡単です。スプライト内の画像の位置に基づいています。便利なチュートリアルは、Flowdevです。ここにある例はW3Schools