jQuery .hover() 不更改图像

Question

我已经环顾四周并尝试了一些我在这里看到的东西来尝试解决此问题，但我似乎找不到原因。我在toppic课上有五张图片。我希望能够将鼠标悬停在 toppic 类中的图像上，并使用悬停在上面的图像更改屏幕中的大图像(id = Biggin(，然后在鼠标离开图像时更改回默认值。有什么公然的错误吗？我从以前的工作函数复制并粘贴，我不确定这次我做错了什么。

$(".toppic").hover(function() {
  var imgsrc = this.src;
  $("#Biggin").attr("src", imgsrc);
})
$(".toppic").mouseout(function() {   
  $("#Biggin").attr("src", ".//Images/IMG_3604.JPG");
})

Answer 1

我在开始使用 jQuery 时遇到了类似的问题，并且可能有几个原因导致您的代码无法按预期工作。我的最常见的原因是jQuery脚本元素在DOM存在之前就被激活了。

确保 html 文件中的 jQuery 脚本元素在 DOM 加载后加载。您可以将 jQuery 脚本元素放在 HTML 文件的末尾，以便在 HTML 加载后加载 jQuery。

我希望这有所帮助。