jQuery 在鼠标悬停时将元素放置在彼此旁边 - 修复可滚动 div

发布于 2024-12-19 22:18:06 字数 356 浏览 0 评论 0原文

所以我摆弄了这个 jsFiddle 的 mouseover 与绝对定位 div

结果是不理想的。该代码基于 jquery 如何相对于另一个元素定位一个元素但代码没有按预期工作。我可以弄清楚如何根据绝对定位重新定位偏移（例如减去标题的偏移）。但我遇到的问题是滚动定位。一旦开始滚动，位置就错误了。有人知道它的解决方案吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

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

人间☆小暴躁 2024-12-26 22:18:06

由于某种原因，当您滚动文档时，jQuery 中的 offset().top 值会发生变化。相反，只需使用标准 HTML 元素属性 offsetLeft 和 offsetTop：

工作示例：http://jsfiddle.net/YpcSe/2/

代码：

$("#m1").mouseover( function(){
    $("#o1").css({ "left": this.offsetLeft, "top":this.offsetTop }).show();
})
.mouseout( function(){
    $("#o1").hide();
});



$("#m2").mouseover( function(){
   $("#o2").css({ "left": this.offsetLeft, "top":this.offsetTop }).show();
})
.mouseout( function(){
    $("#o2").hide();
});

For some reason the offset().top value changes in jQuery when you scroll the document. Instead, simply use the standard HTML element properties offsetLeft and offsetTop:

Working example: http://jsfiddle.net/YpcSe/2/

Code:

$("#m1").mouseover( function(){
    $("#o1").css({ "left": this.offsetLeft, "top":this.offsetTop }).show();
})
.mouseout( function(){
    $("#o1").hide();
});



$("#m2").mouseover( function(){
   $("#o2").css({ "left": this.offsetLeft, "top":this.offsetTop }).show();
})
.mouseout( function(){
    $("#o2").hide();
});

回复收藏 0 原文

清君侧 2024-12-26 22:18:06

不想回答我自己的问题，但请参阅这里：
jquery 的工作解决方案

基本上问题是元素插入到了错误的位置。偏移量以某种方式与带有滚动条的页面没有正确关联。这可以通过在父表单上添加元素来解决（例如，如果您想让某些按钮可见）。或者

它也修复了我的重叠元素的问题。想象一下您有一个固定定位的元素 E1 和一个绝对定位的元素 E2。一是左侧菜单，E2是内容。当您想要在将鼠标悬停在 E2 内容中的例如 div 上时使元素可见/显示元素并希望它与左侧菜单 E1 重叠时，那么您需要确保该 div 不在内容中，因为看起来您不能重叠到位置固定的 E2 的同级中。

回复收藏 0 原文

~没有更多了~