在 <div> 外显示图像，其中溢出：隐藏？答案

【问题标题】：Display image outside <div> where overflow:hidden?在 <div> 外显示图像，其中溢出：隐藏？
【发布时间】：2013-07-28 17:01:00
【问题描述】：

我正在使用 Ganesh 非常棒的 jCarouselLite jQuery 插件在页面顶部显示一系列滚动的缩略图。容器 div 必须具有 overflow:hidden 以限制任何时候显示的缩略图数量。当鼠标悬停在缩略图上时，我想显示更大版本的缩略图。我大部分时间都在使用 CSS，但由于溢出设置，我无法说服大图像显示在父 div 的范围之外，并且它在该 div 内显示“剪辑”。

这可以使用 CSS 实现吗？

【问题讨论】：

标签： jquery html css

【解决方案1】：

无法在设置了overflow:hidden 的父元素边界之外显示子元素。实现所需效果的最佳方法是将较大的缩略图图像移到被剪裁的 div 之外，并使用 javascript 显示/隐藏它。

【讨论】：

【解决方案2】：

你不能用 css 做到这一点，但是可以用 javascript-jquery 来实现。

$(function () {
    $(".div").on("mouseover", function () {

        $(this).children(".myimg").show().parents().css({overflow:'visible'});

    }).on("mouseout", function () {

        $(this).children(".myimg").hide().parents().css({overflow:'hidden'});

    });
});

【讨论】：

【解决方案3】：

您必须调整 div 的大小或将图像移到 overflow:hidden; div 之外。 overflow:hidden 将始终剪辑内容。

如果您发布几行代码会更容易提供帮助。

【讨论】：

【解决方案4】：

这在 CSS 中是不可能的，除非您调整容器的大小，但您可以使用 jQuery 将图像附加到正文，然后在缩略图上定位和动画。

【讨论】：