修复了鼠标悬停时列表元素的定位 - jQuery

发布于 2024-12-06 11:54:51 字数 498 浏览 1 评论 0原文

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

通常元素的高度设置为 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

小猫一只 2024-12-13 11:54:51

这就是我的做法,它并不完美,当然你可能需要一些 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

姐不稀罕 2024-12-13 11:54:51

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

you should use position absolute ( inside a relative div) and then your bottom div wont be affected

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文