70

class-btnを含むクラスにカーソルを合わせると、背景画像を変更するアンカーがありbackground-imageます。

ホバーすると、

a.class-btn:hover
{
    background-image('path/to/image-hovered.jpg');
}

ページが最初に読み込まれ、このボタンを最初にホバーすると、ページが点滅します（ホバーされた画像をダウンロードするのに約0.5秒かかります）。JavaScriptなしでその点滅を回避するにはどうすればよいですか（単純なcssとhtmlのみが許可されます）？

Stack Overflowで同様の質問を検索しようとしましたが、うまくいきませんでした。

追加したばかり：

  • ホバーした画像を「プリロード」する必要がありますか？どのように？
  • z-indexまたは不透明度で遊ぶ必要がありますか？

これはすべてのブラウザで発生するため、ソリューションはすべてのブラウザで機能するはずです。

4

13 に答える 13

94

これは、私が何度か使用したシンプルで効果的なcss画像のプリロード手法です。コンテンツを配置することで、複数の画像を読み込むことができます：url（）url（）url（）...など。

body:after {
 display: none;
 content: url('path/to/image-hovered.jpg') url('path/to/another-image-hovered.jpg');
}
于 2015-07-06T08:11:26.460 に答える
62

これを回避する最も簡単な方法は、画像スプライトを利用することです。概要については、このCSSTricksの記事をご覧ください。

そうすることで、発生しているちらつきの問題を解決するだけでなく、HTTPリクエストの数も減らすことができます。CSSは次のようになります。

a.class-btn { background: url('path/to/image.jpg') 0 0 no-repeat; }
a.class-btn:hover { background-position: 0 -40px; }

詳細は画像によって異なります。オンラインのスプライトジェネレーターを使用して、プロセスを簡単にすることもできます。

于 2012-11-08T10:06:33.533 に答える
15

私が使用する簡単なトリックは、元の背景画像を2倍にして、ホバーした画像を最初に配置することです。

.next {
  background: url(../images/next-hover.png) center center no-repeat;
  background: url(../images/next.png) center center no-repeat;
    &:hover{
      background: url(../images/next-hover.png) center center no-repeat;
    }
 }

パフォーマンスへの影響はなく、非常にシンプルです

または、SCSSをまだ使用していない場合：

.next {
  background: url(../images/next-hover.png) center center no-repeat;
  background: url(../images/next.png) center center no-repeat;        
 }
 .next:hover{
  background: url(../images/next-hover.png) center center no-repeat;
 }
于 2014-03-20T12:30:48.750 に答える
8

これを行う場合：

#the-button {
background-image: url('images/img.gif');
}
#the-button:before {
  content: url('images/animated-img.gif');
  width:0;
  height:0;
  visibility:hidden;
}

#the-button:hover {
  background-image: url('images/animated-img.gif');
}

これは本当に役立ちます！

ここを参照してください：

http://particle-in-a-box.com/blog-post/pre-load-hover-images-css-only

PS-私の仕事ではなく、私が見つけた解決策:)

于 2015-09-24T08:34:13.133 に答える
3

@Kristianの隠しコンテンツを適用するメソッド：url（）'本文の後にFirefox 48.0（OS X）では機能しなかったようです。

ただし、「display：none;」を変更します。次のようなものに：

body:after {
 position: absolute; overflow: hidden; left: -50000px;
 content: url(/path/to/picture-1.jpg) url(/path/to/picture-2.jpg);
}

...私のためにトリックをしました。おそらくFirefoxは非表示の画像をロードしないか、レンダリング（？）に関連している可能性があります。

于 2016-08-26T07:55:00.310 に答える
2

画像をプリロードできます

function preloadImages(srcs, imgs, callback) {
var img;
var remaining = srcs.length;
for (var i = 0; i < srcs.length; i++) {
    img = new Image();
    img.onload = function() {
        --remaining;
        if (remaining <= 0) {
            callback();
        }
    };
    img.src = srcs[i];
    imgs.push(img);
}
}
// then to call it, you would use this
var imageSrcs = ["src1", "src2", "src3", "src4"];
var images = [];
preloadImages(imageSrcs, images, myFunction);
于 2012-11-08T10:07:54.050 に答える
2

これはCSS以外のソリューションです。ホバー画像が1つのディレクトリにあり、共通の命名規則がある場合、たとえば、サブ文字列'-on。'が含まれている場合、ファイル名を選択してHTMLに次のように配置できます。一連の：

<img src='...' style='display: none' />
于 2016-04-29T11:36:00.037 に答える
0

それらが同じ寸法である場合、1つの可能性は、2つの画像を互いに直接重ねて描画する:hoverことです。上部の画像のCSSクラスは次のようになります。display: none;

このように両方の画像がプリロードされますが、ホバーすると2番目の画像が表示されます。

于 2012-11-08T10:07:48.687 に答える
0

「元の背景画像を2倍にする」トリックは私にはうまくいかなかったので、別のcssトリックを使用しました。

.next {
    background: url(../images/next.png) center center no-repeat;        
}
.next:hover {
    background: url(../images/next-hover.png) center center no-repeat;
}
.next:after {
    content: url(../images/next-hover.png);
    display: none;
}
于 2015-02-11T14:53:12.303 に答える
0

このテクニックは私にとってうまく機能し、ホバー画像がプリロードされているだけでなく、表示される準備ができて待機していることを保証します。（他のほとんどのソリューションは、ホバー時に背景画像を切り替えることに依存しています。これは、ブラウザが理解するのに少し時間がかかるようですが、画像が事前に読み込まれています。）

2つの画像を使用してコンテナに：beforeおよび：after疑似要素を作成しますが、ホバーで表示したいものを非表示にします。次に、ホバーして、表示を切り替えます。

両方が同じサイズと配置ルールを共有している限り、きちんとしたスワップが表示されるはずです。

.image-container {
    &:before { display: block; background-image: url(uncovered.png); }
    &:after { display: none; background-image: url(uncovered.png); }
}
.image-container:hover {
    &:before { display: none; }
    &:after { display: block; }
}
于 2019-08-22T15:56:24.070 に答える
0

私も同じ問題を抱えていました。cssに関連するすべてを試した後、問題を解決できません。最終的に問題を解決したのは、誰かが要素をホバリングすることをシミュレートすることでした。cssは通常のものです。

CSS

#elemName{
 /* ... */
} 
#elemName:hover{
 /* change bg image */
}

JS

var element = document.getElementById('elemName');
var event = new MouseEvent('mouseover', {
  'view': window,
  'bubbles': true,
  'cancelable': true
});
element.dispatchEvent(event);
于 2021-01-24T21:12:30.417 に答える
-2

ソースではなく、背景画像のサイズを変更するだけです。それで...

a.class-btn {
    background-image: url('path/to/image-hovered.jpg');
    background-size: 0;
}
a.class-btn:hover {
    background-size: auto;
}
于 2012-11-08T10:09:04.447 に答える
-3

これを行う最良の方法は、画像をWebページに挿入し、表示をnoneに設定することです。

于 2013-08-17T05:26:33.743 に答える