0

2 つの画像があります。1 つはデフォルト状態として機能し、もう 1 つはホバー状態として使用されます。私は次のようにそれらを交換します：

$('.close-project').hover (e) ->
  $(@).children().attr 'src', 'images/close-button-hover2.jpg'
, (e) ->
  $(@).children().attr 'src', 'images/close-button2.jpg'

ホバーするたびに、サーバーへのGETリクエストがあり、この画像の別のコピーがリソースにあるようです（Chromeの開発ツールによる）。これを防ぐ方法はありますか？

この投稿をチェックしていただきありがとうございます。

4

1 に答える 1

1

imgソース アドレスを変更する代わりに、デフォルト イメージ用と非表示イメージ用の 2 つのイメージ エレメントを作成し、ホバー イベントがトリガーされたときにどちらが表示されるかを単純に切り替えます。

HTML:

<a href="#">
    <img id="default" alt="" src="default.jpg"/>
    <img id="hidden" style="display:none" alt="" src="hidden.jpg"/>
</a>

そしてJavaScript：

$(function () {
    $('a').hover(function () {
        $('#default').hide();
        $('#hidden').show();
    }, function () {
        $('#default').show();
        $('#hidden').hide();
    });
});

これは動作中の jsfiddleです。

ちなみに、cssだけでもできますので、こちらの jsfiddle をご確認ください。

于 2013-03-14T00:59:06.160 に答える