缩略图hover时切换图像？

请看这个小提琴： http ： //jsfiddle.net/rabelais/e47xq/2/

当用户在缩略图上hover时，我想显示缩略图的大图像。 以下是我的出发点。 有什么建议怎么做？ 在我的最终版本中，可能有20个缩略图，所以我需要尽可能简洁的代码。

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

Answer 1

.attr（）

$(this).attr('href')获取当前标记href属性。

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

和

将第二图像ID设置为image-2

小提琴演示

Id必须是唯一的。 不要对多个元素使用相同的id。

阅读具有相同id属性的两个HTML元素：它真的有多糟糕？

Answer 2

好吧，可能不是最好的整体解决方案，但鉴于你有什么，检查这个小提琴： http ： //jsfiddle.net/e47xq/1/

在anchor元素上使用$(this).attr('href')来检索所需的选择器。