Javascript 在图像缩略图上水平滚动，并在鼠标悬停时弹出图像

我用html和css编写了一些代码，可以在图像缩略图上水平滚动，并在鼠标悬停时弹出。问题是，当我可以水平滚动时，鼠标悬停时弹出的（放大的）图像仅在包含它的div中可见。我希望它是在页面上所有其他内容的顶部可见。但是，由于我是通过设置div overflow-x:scroll的属性来创建滚动条的，因此，如果放大的图像大于div，则必须滚动才能看到。当我没有看到要滚动的overflow-x属性时，我可以像我希望的那样在所有其他内容的顶部查看放大的图像，但所有其他缩略图也都可见。下面是一个代码片段来展示我所做的工作

HTML

这是一个例子
汽车1
汽车2
CSS
#示例1_car1，#示例1_car2，.滚动{
位置：相对位置；
}
#例1_car1，#例1_car2
{
宽度：2400像素；
高度：200px；
z索引：0
}
纸卷
{
宽度：800px；
高度：210px；
溢出-x：滚动；
z指数：0；
}
.拇指img{
边框：1px实心#000；
保证金：3倍；
浮动：左；
zindex:-1；
}
.拇指跨度{
位置：相对；/*绝对*/
显示：无；
}
.拇指：悬停，.拇指：悬停范围{
显示：内联；
顶部：0；左侧：0px；
/*z指数：1*/
z指数：10；
}

---

任何帮助都将不胜感激。

要使放大的图像显示在可滚动区域的顶部/外部，它必须实际位于可滚动区域的外部

---

要使放大的图像显示在外部，当鼠标悬停在可滚动区域内的缩略图上时，您需要在HTML和CSS上使用JavaScript

在这里，我没有改变你的HTML结构。相反，当您将鼠标悬停在缩略图上时，我使用jQuery将放大的图像克隆到可滚动区域之外，并将其附加到#example1 div

JavaScript部分：

$('.thumb').hover(
    function(){
        var thumb = $(this).children('img');
        var large = $(this).find('span>img').clone();
        $('#example1').append(large);
        large.addClass('enlargedImg');
        large.css({
            'top': thumb.offset().top,
            'left': thumb.offset().left
        });
    },
    function(){
        $('.enlargedImg').remove();
    }
);

我使用thumb图像的offset（）值将放大的图像直接放在它上面。你可能会想移动它一点，但希望这足以让你开始

$('.thumb').hover(
    function(){
        var thumb = $(this).children('img');
        var large = $(this).find('span>img').clone();
        $('#example1').append(large);
        large.addClass('enlargedImg');
        large.css({
            'top': thumb.offset().top,
            'left': thumb.offset().left
        });
    },
    function(){
        $('.enlargedImg').remove();
    }
);