jQuery如何在溢出隐藏框上显示div [英] jQuery how show div over overflow hidden box

问题描述

我正在使用简单的jcarousel，这是它们的代码: http://jsfiddle.net/w6fLA/

I'm using simple jcarousel here is ther code: http://jsfiddle.net/w6fLA/

当悬停"li"时，我试图用txt显示div框，但隐藏的溢出隐藏了该元素，如何显示所有框的顶部?

I'm trying to show div box with txt when hover "li" but overflow hidden hides the element how can I show box top of everything?

这是我的js:

$('.jcarousel-skin-tango li').hover(
    function(){
        $(this).append($("<div class='box'><p>" + $(this).find('img').attr('alt') + "</p></div>").hide().fadeIn(300));
    },

    function(){
        $('.box').fadeOut(300, function() { $(this).remove();});
    }
);

推荐答案

这仍然需要一些技巧，但不要将工具提示附加到内部元素上，而是将其应用于主体.然后使用图像jQuery对象的offset顶部和左侧属性定位它.我也更改了一些CSS.

This still needs some finessing, but instead of appending the tooltip to the inner element, apply it to the body instead. Then position it using the offset top and left properties of the image jQuery object. I changed some of the CSS too.

http://jsfiddle.net/w6fLA/1/

$('.jcarousel-skin-tango li').hover(
    function(){
        var $img = $(this).find('img');
        $('body')
            .append($("<div class='box'><p>" + $img
            .attr('alt') + "</p></div>")
            .hide()
            .fadeIn(300)
            .css('top', $img.offset().top + 60)
            .css('left', $img.offset().left + 30));
    },

    function(){
        $('.box').fadeOut(300, function() { $(this).remove();});
    }
);
​

这篇关于jQuery如何在溢出隐藏框上显示div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！