Question

我想在鼠标悬停时显示列表元素中的溢出区域。

通常，元素的高度设置为200px并且有一个溢出区域（不显示。）。

$('#extra_product ul li').live('mouseenter',function(){
    var t = $(this);
    var sHeight = t.height();
    t.css({"height":"auto","z-index":"999"});
    var eHeight = t.height();
    t.height( sHeight ).animate({ height: eHeight });
});

这是有效的，但其他元素正在影响并向下和向下移动。我不想影响其他元素，只是动画到实际高度并保持在下面的元素上。

工作演示网址：http://jsfiddle.net/D9P7V/

Answer 1

这就是我如何做到的，它还不完美你当然可能需要一些css调整我使用的技巧：

在javascript中，克隆要显示的元素，并将其附加到正文，因此它不再影响其他标记，然后将其放置在元素上，并显示它（动画它，你喜欢的任何东西）

示例从您的代码开始： http://jsfiddle.net/D9P7V/4/

编辑添加了无需克隆的解决方案

另一种解决方案，如果你想留下标记，不要克隆，正在将LI元素设置在position：relative上，并将具有额外内容绝对值的div放置到该LI。

示例可以在这里找到： http://jsfiddle.net/D9P7V/5/

结束修改

Answer 2

你应该使用绝对位置（在相对div内），然后你的底部div不会受到影响

修复了将鼠标悬停在jQuery上的列表元素的问题

2 个答案: