我有六张图片，悬停时如何显示一张大图？答案

【问题标题】：I have six images and on hover how can I reveal one large image?我有六张图片，悬停时如何显示一张大图？
【发布时间】：2011-08-20 10:59:46
【问题描述】：

当您将鼠标悬停在六个较小图像中的任何一个上时，我正在尝试显示六个较大图像之一。

大图像将由六个较小的占位符组成。

所附图片显示了我正在尝试做的几个示例。

感谢您对此的任何回答。

【问题讨论】：

一些代码会很有帮助。如果您可以在每个州发布 html 或创建一个 jsfiddle，我们可以为您提供帮助。

标签： jquery css hover

【解决方案1】：

你的意思是这样的吗？

http://jsfiddle.net/vkAbg/

$('#images img').mouseover(function(){
    $('#more-images img').remove();
    for(var i = 0; i < 6; i++)
    {
        $('#more-images').append($(this).clone());
    }
});

这是一个带有更多图片的更新示例：http://jsfiddle.net/vkAbg/1/

更新

根据您的评论，以下更新似乎更像您的要求：

http://jsfiddle.net/vkAbg/2/

【讨论】：

@sg3s：因为 OP 想要一个 jQuery 解决方案。
+1 将悬停图像放在缩略图下方/旁边而不是顶部的好主意，因为 OP 会遇到严重的可用性问题。
Jamie 感谢您的回复。唯一的问题是，我需要两侧存在于同一个空间中...如果您看我的图形，状态 1 和状态 2 是相同的空间。因此，当您将鼠标悬停在图片 1 上时，所有六张图片都会显示一张大图片。
@mm-93 请查看我的更新。让我知道这是否是您的意思。
非常感谢您的更新...您的与上面的 imoda 有何不同？我不确定哪个最好用...

【解决方案2】：

对此并不感到自豪，但它会满足您的要求。

http://jsfiddle.net/imoda/N4aFP/2/

var srcs;

srcs = new Array();

var i = 0;

$('img').each(function(){

    srcs[i] = $(this).attr('src');

    i++;
});

$('img').hover(function(){

    $('img').attr('src', $(this).attr('src'));
},function(){

    restore(srcs);
});

function restore(srcs) {

    i = 0;

    $('img').each(function(){

        $(this).attr('src', srcs[i]);

        i++;
    });
}

【讨论】：

非常感谢您的回复...您的回答与此有何不同：jsfiddle.net/vkAbg/2我不确定哪个是最佳解决方案...
看起来像是将图像放入一个新对象more-images，然后将其覆盖到页面上。所以你有一个 1-6 层，然后出现在顶部的 N x 6 层。我的只是替换了 src 属性，所以你只有 6 张图片，没有 hokey pokey

【解决方案3】：

所以是这样的：

http://jsfiddle.net/awy8F/6/

看看我是如何将一张图片（你的图片）添加到那个类的，确保它只应用于第一个方块。

这应该对你有帮助吧？它只是改变背景图像的 css 位置......

【讨论】：

这是什么？这甚至不是部分解决方案。
我没有保存 jsfiddle :-/
这可能应该被删除，直到你得到一个真正的答案更新。