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

实现轮播的方式会阻止您通过插入工具提示来实现。

一个选项是将级别插入“position：absolute”，并用鼠标坐标控制其位置。

Answer 2

这仍然需要一些功能，但不是将工具提示附加到内部元素，而是将其应用于身体。然后使用图像jQuery对象的offset顶部和左侧属性来定位它。我也改变了一些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();});
    }
);

jQuery如何显示div溢出隐藏框

2 个答案: