jQuery .hover() not changing image

Question

I've looked around and tried a few things I've seen on here to try to fix this issue but I can't seem to find out why. I have five images in the toppic class. I want to be able to hover over an image in the toppic class and change the big image (id = Biggin) in my screen with the image that is being hovered over, and then change back to the default when the mouse leaves the image. Is there anything blatantly wrong? I copied and pasted from a previous working function and I'm not sure as to what I did wrong this time.

$(".toppic").hover(function() {
  var imgsrc = this.src;
  $("#Biggin").attr("src", imgsrc);

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

Answer 1

I had similar issues when starting out using jQuery, and there could be a few reasons why your code isn't working as intended. The most common reason mine wasn't working is that the jQuery script element was getting activated before the DOM existed.

Make sure that the jQuery script element in your html file loads after your DOM loads. You can place the jQuery script element at the end of the HTML file so your jQuery would be loaded after the HTML loads.

I hope that helps.