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

【问题标题】：Hover on images to show larger hidden image linked by alt tag?将鼠标悬停在图像上以显示由 alt 标签链接的更大隐藏图像？
【发布时间】：2014-05-08 08:16:10
【问题描述】：

请看这个小提琴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);
});

【问题讨论】：

反对投票的任何理由？？？？

标签： javascript jquery image alt

【解决方案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);
    });
});

这里是修改代码的小提琴：http://jsfiddle.net/mj7ba/。

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

【讨论】：

悬停后提供的代码不会隐藏图像。
@EugeneSafronov 我知道不是，但这就是为什么我的回答中有最后一句话；我不清楚 is 是否应该保持可见。

【解决方案2】：

我建议进行以下更改：

不要滥用 alt 属性并为此目的使用 data-*
在选择器中使用 id
使用显示图像作为占位符，因为原始图像已经包含正确的 url

这里是代码：fiddle

Javascript：

$(".thumbnails").on("mouseover ", "img", function () {   
    $('#' + $(this).attr('data-large'))
     .attr('src', $(this).attr('src'))
     .css('visibility', 'visible');
 });

$(".thumbnails").on("mouseout ", "img", function () {   
   $('#' + $(this).attr('data-large')).css('visibility', 'hidden');
 });

HTML：

<div class="thumbnails">
<img src="http://intelligen.info/images/Personal/instagram Randoms/alicecurls.jpg"  data-large="alicecurls"/>
<img src="http://intelligen.info/images/Personal/instagram Randoms/genna.jpg" data-large="genna"/>
</div>

<div class="displayed-image">
   <img id="alicecurls" class="repeatable" />
   <img id="genna" class="repeatable"  />
</div>

【讨论】：