Toggle image on hover of thumbnails?

Question

please see this fiddle: http://jsfiddle.net/rabelais/e47xq/2/

I want to show the large image of the thumbnail when the uses hovers on the thumbnail. Below is my starting point. Any suggestions how to do this? In my final version there will be possible 20 thumbnails so I need the code to be as concise as possible.

$(".thumnails").on("mouseover mouseout", "a", function () {
$('#').toggle();
});

Answer 1

.attr()

$(this).attr('href') get current a tag href attribute.

$(".thumnails").on("mouseover mouseout", "a", function () {
    $('#' + $(this).attr('href')).toggle();
});

and

set 2nd image id to image-2

Fiddle Demo

Id must be unique. Don't use same id for multiple elements.

Read Two HTML elements with same id attribute: How bad is it really?

Answer 2

Well, probably not the best overall solution, but given what you have, check this fiddle: http://jsfiddle.net/e47xq/1/

Use $(this).attr('href') on the anchor element to retrieve the selector you need.