jQuery Position Element 在鼠标悬停时彼此相邻 - 修复了可滚动的 div答案

【问题标题】：jQuery Position Element next to each other on mouse over - with fixing of scrollable divjQuery Position Element 在鼠标悬停时彼此相邻 - 修复了可滚动的 div
【发布时间】：2011-12-06 13:44:50
【问题描述】：

所以我摆弄了这个 jsFiddle of mouseover together with absolute positioning divs

结果是不希望的。代码基于jquery how to position one element relative to another 但是代码没有按预期工作。我可以弄清楚如何根据绝对定位重新定位偏移量（例如，减去标题的偏移量）。但我遇到的问题是滚动定位。一旦你开始滚动位置是错误的。有人知道它的解决方案吗？

【问题讨论】：

标签： javascript jquery css scrollbar onmouseover

【解决方案1】：

由于某种原因，当您滚动文档时，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();
});

【讨论】：

顺便说一下，像这样的例子总是一个很好的机会来思考什么时候真正需要 jQuery（即使用 offsetLeft 而不是 jquery 的 offset 函数）。另一个例子是使用 this.className 而不是 $(this).attr('class')...
我必须纠正自己：这行不通。简单的旧 javascript offsetTop 函数给我一个完全错误的位置，当我在更复杂的网页中使用它时，它与一些不同的父元素相关。
那么请发布您的代码，或创建一个显示此内容的小提琴。
我很乐意，但我已经在这个问题上花费了太多时间，而且我永远不会投票。我发布了解决问题（和其他问题）的解决方案
我得再看一遍。但只有当我有时间时...... - 看起来很有希望的是它没有你在我的例子中看到的浮动错误。例如。你将鼠标悬停在第二个红色的东西上，然后滚动——文本会随着滚动而滚动一点，然后消失。

【解决方案2】：

讨厌回答我自己的问题，但请看这里： working solution with jquery

基本上问题是元素被插入了错误的位置。偏移量不知何故与带有滚动条的页面没有正确关联。这可以通过在父表单上添加元素来解决（例如，如果你想让一些按钮可见）。或<body>

它还解决了我遇到的重叠元素的问题。想象一下，您有一个固定定位元素 E1 和一个绝对定位元素 E2。一是左侧菜单，E2是内容。当您想在鼠标悬停时使元素可见/显示时，例如E2 内容中的 div 并希望它与左侧菜单 E1 重叠，那么您需要确保该 div 不在内容中，因为您似乎无法重叠到 E2 的同级中，该兄弟位于固定位置。

【讨论】：

我已经更新了您引用的原始问题的答案，它现在也应该可以处理您的情况了 :)