我有六个图像，并在悬停时如何显示一个大图像？

Question

当我将鼠标悬停在六个较小的图像中时，我想要做的是显示六个较大图像中的一个。

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

附图显示了我想要做的几个例子。

感谢你的任何答案。

Answer 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/

Answer 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++;
    });
}

Answer 3

这样的事情：

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

看看我是如何将一个图像，即您的图像添加到该一个类中，确保它仅应用于第一个方块。

这对你有帮助吗？它只是改变背景图像的CSS位置......