在外面显示图像 <div> 哪里溢出：隐藏？

Question

I'm using Ganesh's very wonderful jCarouselLite jQuery plugin to display a scrolling series of thumbnail images at the top of a page. The container div necessarily has overflow:hidden to limit the number of thumbnails displayed at any one time. I would like to display a larger version of the thumbnail when the mouse hovers over it. I'm most of the way there using CSS but I can't persuade the large image to display outside the confines of the parent div due to the overflow setting and it displays "clipped" within that div.

Is this possible using CSS?

Answer 1

There is no way to show a child element outside the bounds of a parent element that has overflow:hidden set. The best way to accomplish the desired affect is to move the larger thumbnail images outside of the div that is clipped, and show/hide it with javascript.

Answer 2

You cannot do that with css, BUT can be achived with 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

You must either resize your div or move image outside overflow:hidden; div. overflow:hidden will always clip content.

It would be easier to help if you posted few lines of your code.

Answer 4

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