jquery - Jquery/悬停和更改img

Question

当我悬停图像时，我使用下一个来更改图片：

<img id="image1" src="imimage.jpg" alt="facebook.com">

$('#image1').hover(function() {
    $('#image1').attr('src', 'imanewimage.jpg');
}, function() { 
    $('#image1').attr('src', 'imimage.jpg'); 
}); 

但是发生了一些非常奇怪的事情：当我加载 HTML 时，加载了 imimage.jpg。但是当我将它悬停时， imimage.jpg 不会加载，只显示 alt 属性。

可能是什么原因？

Answer 1

您上面的代码是正确的，显示 alt 标记是因为图像很可能不在正确的位置。根据您的代码，图像应与您的页面位于同一目录中。

使用来自互联网的图像进行测试（您说它们正在工作），一定是文件位置问题。

Answer 2

您可以通过使用 css 更改图像而不是 javascript 来简化这一点，这将使其更普遍兼容并且更易于编码......

<div class='imageToHover'></div>

.imageToHover {
   /*you probably want some height/width stuff in here too*/
   background-image: url(imimage.jpg);
}
.imageToHover:hover {
   background-image: url(imanewimage.jpg);
}