jQuery如何在溢出隐藏框上显示div

Question

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

我试图在悬停“li”时显示带有txt的div框，但溢出隐藏隐藏了该元素如何显示所有内容的框顶部？

这是我的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();});
    }
);

Answer 1

这仍然需要一些技巧，但不是将工具提示附加到内部元素，而是将其应用到正文。然后使用图像 jQuery 对象的 offset top 和 left 属性对其进行定位。我也更改了一些 CSS。

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();});
    }
);
​