我正在使用简单的 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();});
}
);
最佳答案
这仍然需要一些技巧,但不是将工具提示附加到内部元素,而是将其应用到正文。然后使用图像 jQuery 对象的 offset
top 和 left 属性对其进行定位。我也更改了一些 CSS。
$('.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,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10015768/