在<div>外显示图像overflow：hidden？</div>

Question

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

这可以使用CSS吗？

Answer 1

无法在具有overflow：hidden set的父元素的边界之外显示子元素。实现所需效果的最佳方法是将较大的缩略图移动到剪切的div之外，并使用javascript显示/隐藏它。

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

    });
});

Answer 3

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

如果您发布了几行代码，那么帮助会更容易。

Answer 4

除非您调整容器的大小，否则CSS无法实现这一点，但您可以使用jQuery将图像附加到正文，然后在缩略图上定位并设置动画。