javascript - 在悬停时使用 html 和 javascript 让子 dom 元素超出父 div 的范围

Question

很难在标题中概括问题到底是什么所以这里有更多信息...

我有一个图片库，其中包含一个带有图片的列表元素(以及一个用于显示文本标签的跨度)。HTML 布局如下所示:

            <div class="caracteristics_list gallery">

                <ul class="thumb">
                    <li><a href="#"><span class="video">Play</span><img src="images/gallery1.jpg" alt="" /></a></li>
                    <li><a href="#"><img src="images/gallery1.jpg" alt="" /></a></li>
                    <li><a href="#"><img src="images/gallery1.jpg" alt="" /></a></li>
                    <li><a href="#"><img src="images/gallery2.jpg" alt="" /></a></li>
                    <li><a href="#"><img src="images/gallery2.jpg" alt="" /></a></li>
                    <li><a href="#"><img src="images/gallery2.jpg" alt="" /></a></li>
                    <li><a href="#"><span class="tagline">Lorem ipsum</span><img src="images/gallery3.jpg" alt="" /></a></li>
                    <li><a href="#"><span class="tagline">Lorem ipsum</span><img src="images/gallery3.jpg" alt="" /></a></li>
                    <li><a href="#"><img src="images/gallery3.jpg" alt="" /></a></li>
                    <li><a href="#"><img src="images/gallery3.jpg" alt="" /></a></li>
                    <li><a href="#"><img src="images/gallery4.jpg" alt="" /></a></li>
                    <li><a href="#"><img src="images/gallery4.jpg" alt="" /></a></li>
                </ul>                    
            </div>

这个图库有缩放效果 ( taken from this guide ( demo ))

这里的问题是画廊有固定的宽度和高度和一个 overflow: scroll(它不会增长，它包含在该画廊 div 的边界内)。

也就是说，缩放效果被 overflow css 设置切断了。

我现在拥有的一个示例(尽管图像损坏)can be seen on jsfiddle here .

我担心溢出约束会使此方法无法实现，除非我将元素从画廊 div 中取出，并将其准确定位在同一位置(绝对或相对)。

但首先我想确定这是唯一的方法。你有什么想法吗？

Answer 1

不要把图片拿出来，复制一份然后在div中显示出来。需要关闭时销毁对象