jquery - 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

轮播的实现方式阻止您通过在其中插入工具提示来执行此操作。

一个选项是将级别插入级别作为“位置：绝对”，并使用鼠标坐标控制其位置。

Answer 2

这仍然需要一些技巧，但不是将工具提示附加到内部元素，而是将其应用于主体。然后使用offset图像 jQuery 对象的 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();});
    }
);
​