缩略图悬停时切换图像？ [英] Toggle image on hover of thumbnails?

问题描述

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

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

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();
});

推荐答案

。attr（）

$（this）.attr（ 'href'）获取当前标签 href 属性。

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

和

将第二张图片ID设为 image-2

set 2nd image id to image-2

小提琴演示

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

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

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

这篇关于缩略图悬停时切换图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！