2

これは、Chrome で発生している問題です。Firefox では発生しません。下部に CSS、HTML、および Jquery の例を示します。

問題: PNG (たまたまカルーセル jquery プラグインにある) にカーソルを合わせると、最初の PNG がホバー画像に置き換えられます。Jquery のドラッグ アンド ドロップ機能を使用して要素をドラッグしたときにも発生します。問題なく動作しますが、背景がわずかにずれたり、一瞬だけ歪んだりします。これは素晴らしいユーザー エクスペリエンスではなく、誰かが修正方法を知っているかどうか疑問に思っていました。どのコードを見る必要があるか教えてください。

コード例

HTML:

<li id="img-home"><img id="img-home-src" src="<?php echo base_url();?>files/assets/images/homepage/img.png" alt="" /></li>

CSS:

li {
    text-align: center;
    cursor: pointer;
}

#img-home
{
    border:0;
    width:386px;
    height:484px;
    overflow:hidden;
    display: inline-block;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
}

#img-home-src
{
    padding: 0 0 0 0;
    margin: 0 0 0 0;border:0;

}

Jクエリ:

       $("#img-home").hover(
    function () {
          $("#img-home-src").attr("src","<?php echo base_url();?>files/assets/images/homepage/img_hover.png");
    }, 
    function () {
          $("#img-home-src").attr("src","<?php echo base_url();?>files/assets/images/homepage/img.png");
    }
  );
4

5 に答える 5

6

（以前の回答で述べたように）これはキャッシュ/読み込みの問題だと思います。簡単な修正はbackground-image、画像をプリロードするように CSS を介して設定することです。

デモ: http://jsfiddle.net/SO_AMK/cgMxe/4/

HTML (PHP を簡単に使用できるようにインラインで宣言された CSS):

<li id="img-home">
    <img id="img-home-src" src="http://dummyimage.com/386x484/000/0011ff&text=Test+Image" style="background-image: url(<?php echo base_url();?>files/assets/images/homepage/img_hover.png);" alt="" />
</li>​

CSS: 同じ

jQuery: 同じ

于 2012-07-30T04:13:02.027 に答える
6

ホバー時に画像を切り替えるためにjQueryを使用する必要がありますか?
新しい画像はホバーアクションでのみダウンロードを開始するため、これはかなり重いソリューションであり、キャッシュの問題も引き起こします。

純粋な cssを使用して、スプライト技術を使用して目標を達成する (ユーザー エクスペリエンスを向上させる)ことができます。これにより、追加の画像をダウンロードする時間がゼロになります。これは、各状態 (ホバー、アクティブ) の各画像が 1 つの小さな画像に結合され、即座に読み込まれるためです。

ダブレットのデモ

#img {
    width: 300px;
    height: 150px;
    background: url('//placekitten.com/g/300') no-repeat; 
}

#img:hover { background-position: 0 100%; }

スプライトについてもっと読む：

于 2012-07-30T06:59:46.643 に答える
4

img要素はネイティブinline-blockであるため、宣言は必要ありません。CSSリセットを使用していない場合は、参考としてEricMeyerのリセットを確認してください。ブラウザ間のレンダリングの違いを無効にするのに役立ちます。

CSSの背景としてではなく、インラインで画像を読み込む正当な理由があります。

**HTML**
<img src="img1" class="over">
<img src="img2" class="out">

**CSS**
@import url (reset.css);

img.over, img.out { position:absolute; z-index:2; }
img.out { z-index:1; }

**jQuery**
$('.over').mouseover(
    function() {
        $(this).next('img').css('z-index',3);
    }
);
$('.out').mouseout(
    function() {
        $(this).css('z-index',2);
        $(this).prev('img').css('z-index',3);
    }
);

mouseover/out代わりに使用しているのhoverは、一番上の画像が非表示になるか、スタックの一番下にプッシュされると、ブラウザがそれをhover：outとして解釈するためです（つまり、点滅する要素になります）。

HTH

于 2012-08-01T19:33:30.507 に答える
2

そのコードは私には合法のようです。上記のコメントにこれを入れることはできないので、それは単なる意見であり、答えではありません. ページが読み込まれると同時に最初の画像が読み込まれ、オンデマンドで 2 番目の画像が読み込まれるために発生する可能性があります。ホバー機能とサーバーからの完全な画像のダウンロードの間で、背景が 1 秒間シフトされます。その 2 番目の画像をページのどこか、一番上に呼び出して、display:hidden などに指定してみてください。ポイントは、キャッシュに保存され、ホバー関数が呼び出されたときに使用される画像をロードすることです。

于 2012-07-30T03:53:01.080 に答える