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

Question

请参阅此小提琴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);
    });
});

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

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

Answer 2

我建议进行以下更改：

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

这是代码： 小提琴

使用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>