Javascript 使用jQuery悬停时图像交换：单击并解除悬停后没有图像

我在悬停图像上实现了一个jQuery交换函数，如下所示：

// header image hover

var sourceSwap = function () {
    var $this = $(this);
    var newSource = $this.data('alt-src');
    $this.data('alt-src', $this.attr('src'));
    $this.attr('src', newSource);
};

$(function () {
    $('img.logoswap').hover(sourceSwap, sourceSwap);
});

只要不点击图像（这是一个链接），它就可以完美地工作

但是：一旦单击图像，并且将鼠标从图像上移开（因此在加载另一个页面的几秒钟内），图像将消失，只显示alt标记

我无法在JSFIDLE中重新创建它，因为它们不允许在框架中使用链接，所以这里是一个实时示例（由于问题不再可见而删除）。图像悬停链接是左上角的徽标。正在使用的代码和标记可以在中看到，但正如前面提到的，我所说的错误无法看到

---

有没有办法防止这种行为？比如锁定在最新状态还是什么？

您的实例看起来与您所描述的很好地配合。您正在使用的浏览器？还有什么特别的原因使你不能很容易地用CSS实现这一点？我没有看到chrome的问题，你使用的是什么浏览器？你也试过用css鼠标悬停来交换图片吗？点击图片然后鼠标悬停可以看到。最新的Chrome，最新的OSX。我不是通过CSS背景图像来实现的，因为它分配了一个响应图像类。但同样的情况也可能发生在背景大小上。我想我只是想提高一下我的jQuery技能：）你为什么不在悬停中使用CSS？另外，由于你加载的是单独的图像，如果你的浏览器（出于任何原因）没有缓存任何东西，它可能每次都试图从服务器检索图像。这就是为什么使用精灵是个好主意的原因之一。