javascript - 将鼠标悬停在图像上以显示由 alt 标签链接的更大的隐藏图像？

Question

请看这个 fiddle http://jsfiddle.net/rabelais/fEaAZ/4/

如何使用图像的 alt 标签将小缩略图链接到较大的隐藏图像？

我希望匹配的隐藏图像在较小缩略图悬停时显示。

 $(".thumbnails").on("mouseover mouseout", "img", function () {
var flag = $(this).data('flag');

$('[alt="' + $(this).attr('alt') + '"]').css('visibility', flag ? 'hidden' : 'visible');

$(this).data('flag', !flag);
});

Answer 1

如果我理解正确的话，那么你最大的问题是当需要显示其他图片时，以前显示的图像没有隐藏。

当您将鼠标悬停在缩略图上并将 alt 设置为“alicecurls”时，您将更改缩略图和大图片的可见性，但仅限于那些包含确切 alt 的图片。这意味着之前可见的图片仍然可见。

您可能想要浏览所有大图片并隐藏那些没有正确的属性 alt 值的图片。

我会按以下方式更改您的代码:

$(".thumbnails").on("mouseover mouseout", 'img', function () {
    var alt = $(this).attr('alt');
    $('.displayed-image > img').each(function(index, element) {
        var el = $(element),
            visibility = el.attr('alt') === alt ? 'visible' : 'hidden';
        el.css('visibility', visibility);
    });
});

这是更改代码的 fiddle :http://jsfiddle.net/mj7ba/ .

但是，您需要定义用户将鼠标从图片上移开后应显示哪张图片。