0 
$(function () {
    $(".btn").on("mouseover",function(){
        $(this).attr("src", $(this).attr("src").replace("images", "images/hover"));
    });

    $(".btn").on("mouseleave",function(){
        $(this).attr("src", $(this).attr("src").replace("images/hover", "images"));
    });
});

上記のコードは、ユーザーがボタンにカーソルを合わせたときに画像を変更する方法です。ユーザーがボタンをクリックすると、他のページにリダイレクトされます。Html 要素は次のようになります。

<a href="product.php"><img class="btn" src="images/index_03.gif" /></a>

問題は、パスが正しいことは確かですが、ユーザーがボタンをクリックしたとき、次のページの読み込み中、または場合によっては画像にカーソルを合わせると、ホバーした画像は表示されず、リンクが壊れています、なぜそれを修正するのですか？助けてくれてありがとう

4

2 に答える 2

2 
$(this).attr("src", $(this).attr("src").replace("images/hover", "images"));

このコードは、毎回 (またはキャッシュから) 画像をリロードします。

そのため、他のデータも同時に読み込まれているため、ページの読み込み中に、ホバー画像の読み込みが遅くなったり壊れたりします。

より高速な結果を得るには、両方の画像を同時に同じ位置にロードし、ホバー時に表示/非表示にすることをお勧めします。

于 2013-10-13T08:17:51.207 に答える
0

JavaScript 呼び出しの代わりに CSS スプライトを使用すると、マウスオーバーのちらつきがなくなり、サイトに必要な http リクエストの総数が減ります (読み込みが速くなります)。

css ':hover'疑似要素を使用して画像の 'clip' プロパティを変更することで、同じ 'mouseover' 機能を実現できます (IE6 以降でサポートされています)。

これらの CSS トリックの記事を確認してください: CSS スプライト: 概要、クールな理由、および使用方法。
インライン画像を含む CSS スプライト

于 2013-10-13T09:00:34.283 に答える