0 
<!DOCTYPE html>
<html>
<head>
<style>

.main {
    background-image: url('a.jpg');
}

.main:hover {
    background-image: url('b.jpg');
}
</style>

</head> 
<body>
    <div class="main">
    </div>
</body>
</html>

ページをロードすると、a.jpg がまったく表示されないため、ホバー効果がありません

私のコードに何か問題がありますか？

http://jsfiddle.net/ZH9EL/6/

4

2 に答える 2

0

コードに問題はありません。最初の画像はメインの Web サイトにリダイレクトされているため、画像が読み込まれていません。ローカルでホストする必要があります。別の画像を使用しましたが、機能します。

于 2013-07-18T02:40:54.990 に答える
0

いいえ、コードに問題はありません。動作する可能性がありますが、2 つの画像を使用するのは危険だと思います。1 つが読み込まれていない場合、動作しません...

2 つの画像を使用したいのですが、ホバー画像の読み込みに時間がかかる場合や、まったく読み込まれない場合はうまく機能しません..

Alois Mahdal の回答を試してみてください: https://stackoverflow.com/a/19967062/3217130回答をお読みください..

CSS は次のようになります。

        <style>
        #main {
            width: **Yoor-width-in-pixels**.px; height: **Yoor-heigth-in-pixels**px;
            background: url('a-b.jpg') no-repeat left top;
        }
        #main:hover { background-position: -Yoor-negative-width-in-pixelspx 0px }
        </style>

これは機能し、通常の読み込みとホバーが同時に行われるため、DNS やサーバーの遅延に関する問題や、画像が読み込まれていない場合にページの見栄えを悪くする可能性のあるその他の問題に直面することはありません...

Alois Mahdal の回答を試してください。画像 (ab.jpg と新しい小さいがより良いコード) に対してこれを作成する方法がわからない場合は、これでうまくいきます。画像でこれを行う方法を教えてください。およびクラスと必要な結果.. Paint .NETでスプライトを作成するか、 spriteme.orgを使用して実行中の Web サイトの CSS を最適化します。spriteme.orgを使用している場合は、新しい CSS と画像をコピーできます。それらはその場で作成されます。 . 画像を作成または編集する方法はたくさんあります...

私の答えがお役に立てば幸いです。

ハッピーコーディング

于 2014-05-08T22:42:21.880 に答える