使用jQuery將元素相對於不是父級的元素相對於另一個元素定位

如果你看這裏：http://dev.driz.co.uk/tips/你會看到我正在試驗一些Facebook ripoff工具提示。使用jQuery將元素相對於不是父級的元素相對於另一個元素定位

我想要學習的是如何將尖端相對於另一個對象進行定位。例如，如果用戶懸停紅色框，它將顯示相關的工具提示，但與箭頭指向紅色框的對象有關。我想過使用outerWidth和height甚至是position()方法。但不知道如何使用它。還需要將箭頭定位在關係上，例如在框中的位置並且如果用戶滾動頁面，則上下移動它。移動元素。

如果有人能提供一些很棒的例子。

注意我暫時不想試着懸停位，只是試圖讓提示將自己定位在與其他對象相關的位置。

任何人都可以幫忙嗎？由於

來源

2011-09-24 Cameron

如果您只想在鼠標懸停在紅色框上時顯示工具提示，則可以使用當前鼠標位置 – Leto

我並不試圖懸停！我試圖將它與其他對象關聯起來。 – Cameron

看這裏：[鏈接]（http://stackoverflow.com/questions/158070/jquery-how-to-position-one-element-relative-to-another） – Leto

var top = $("#link").offset().top; 
top += $("#link").height(); 
var left = $("#link").offset().left; 
$("#tip").css({ 
    top: top+"px", 
    left: left + "px" 
});

此代碼位置#tip相對於#link。很可能你想在#link以下顯示#tip，因此top += $("#link").height();。

來源

2011-09-24 14:02:22

這不是父母和孩子的元素！請閱讀問題標題;） – Cameron

您在閱讀我的答案後更改了標題。正在更新答案.. –

正如所編輯的，這看起來是正確的。一般的技巧是使用$（「＃link」）。offset（）來獲取紅框相對於文檔的位置，然後使用這些座標以及絕對或固定位置作爲$（「＃tip」）的座標。 – dgvid

使用jQuery將元素相對於不是父級的元素相對於另一個元素定位

回答

相關問題