2

CSS のホバー状態を定義するとき... & ホバー状態で、background:url('image path');この画像がプリロードされるかどうかを変更します。要素の最初のホバーでダウンロードされます..そうであれば、それをプリロードする方法...私は知っています画像をプリロードするためのJavaScript..それはうまくいくでしょうか...

4

4 に答える 4

5

たとえばdiv、高さが20pxあり、ホバー時に背景画像を変更したい場合は、ホバーなしとホバーの両方のグラフィックを含む画像を使用し、ホバーなしを上部に、ホバー画像を下部に配置します. どちらの部分も div の高さ、この場合は 20px にする必要があります。background-position次に、最初にCSSを0px 0px(左上) に設定します。これはデフォルトです (ホバーなし)。

ユーザーが にカーソルを合わせたら、を(20px 上)divに設定します。これにより、背景画像が 20 ピクセル上に移動し、ホバー グラフィックであるスプライトの下半分が表示されます。div からマウスを離すと、スプライトは元の位置に戻ります。background-position0px -20px

CSS:

.hoverDiv /* 通常状態 */
{
    背景: url('images/img.png');
    背景位置: 0px 0px;
}

.hoverDiv:hover /* ホバー状態 */
{
    背景位置: 0px -20px; /* 背景を 20 ピクセル上に移動し、上部の画像を非表示にします */
}

div高さが異なる場合20pxは、div の高さでビットを変更するだけです。

background-position: -20px 0px;スプライトが上下ではなく横に並んでいる場合は、代わりに を使用して X 軸を移動し0px -20px;ます。もちろん、背景も積極的に動かすことができます。

お役に立てれば、

ジェームズ

于 2010-12-02T10:22:56.320 に答える
5

ホバー状態の画像をプリロードするのではなく、ホバーされている状態の画像のみをロードすることを避けたい場合は、通常の画像とホバー画像の両方を保持するスプライトを作成してみませんか? そうすれば、すべてのホバー状態の画像が既に読み込まれていることを確認でき、同時にすべてのリクエストのオーバーヘッドを削減できます。background-position後は、属性の値を設定するだけです。

最初の質問については、答えを見つける最善の方法は、2 つの大きな画像を使用して (2 枚の壁紙でうまくいくでしょう)、自分でテストすることだと思います。元の画像は、コードが実行されているためです。

お役に立てれば ！

于 2010-12-02T10:13:08.173 に答える
2

CSSスプライトを使用できます

于 2010-12-02T10:08:37.377 に答える
0

最善の方法は、CSS スプライトを使用することです。スプライト シートは、内部に多数の画像を含む大きな画像であり、サイトで使用されます。メリットは何ですか？これは、すべての画像をダウンロードするために 1 つの http 要求のみが送信されることを意味します。したがって、サイトの読み込みが少し速くなります。

ホバー効果でうまく機能します！

シンプルなコードに加えて、はるかに使いやすくなっています。JavaScript とは異なり、乱雑で恐ろしいコードがあります。学ぶのはとても簡単です。スプライト内の画像の位置に基づいています。Flowdevに関する便利なチュートリアルを次に示します。W3Schoolsの例を次に示します。

于 2010-12-02T13:40:01.220 に答える