修复了鼠标悬停时列表元素的定位 - jQuery
我想当鼠标悬停时在列表元素中显示溢出区域。
通常元素的高度设置为 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/
I want to show overflow area in a list element when the mouse over.
Normally element's height set to 200px and has an overflow area (not showing.).
$('#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 });
});
This is working but other elements are affecting and moving to next and down. I don't want to affect other elements, just animate to actual height and stay over the below element.
Working demo URL : http://jsfiddle.net/D9P7V/
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
这就是我的做法,它并不完美,当然你可能需要一些 css 调整
我使用的技巧:
在javascript中,克隆要显示的元素,并将其附加到主体,这样它就不能再影响其他标记,然后将其定位在元素上,并显示它(为其设置动画,任何你喜欢的东西)
示例从你的代码开始:
http://jsfiddle.net/D9P7V/4/
编辑添加的解决方案 无需克隆
如果您想保留标记并且不克隆,则 另一个解决方案,
将 LI 元素设置为相对位置,并将带有额外内容的 div 放置到该 LI 的绝对位置。
示例可以在这里找到:
http://jsfiddle.net/D9P7V/5/
结束编辑
this is how i did it, it is not perfect yet you might need some css tweaks of course
the trick i used:
in javascript, clone the element to be shown, and append it to the body, so it cannot influence the other markup anymore, then position it over the element, and show it (animate it, anything you like)
example started from your code:
http://jsfiddle.net/D9P7V/4/
edit added solution without cloning
another solution, if you want to leave the markup in, and don't clone,
is setting the LI element on position: relative, and placing the div with extra about content absolute to that LI.
example can be found here:
http://jsfiddle.net/D9P7V/5/
end edit
你应该使用绝对位置(在相对 div 内),然后你的底部 div 不会受到影响
you should use position absolute ( inside a relative div) and then your bottom div wont be affected