如何將絕對位置的元素放在元素旁邊？

Question

我試圖創建一個div，當用戶將鼠標懸停在鏈接上時，它可以附加到元素上

我有很多鏈接，我的代碼如下所示。

for loops創造出許多環節

codes.... 

link.href='#'; 
link.innerHTML = 'test' 
link.onmouseover = OnHover; 

codes.... 


function OnHover(){ 
    var position; 
    var div = document.createElement('div'); 
     div.className='testdiv'; 
     div.innerHTML = 'test'; 

     position=$(div).position(); 

     div.style.top = position['top'] + 15 + 'px'; 
     $(this).prepend(div); 
} 


    link element1 
    link element2 
---- 
| | //add new div when hover link element2 
---- 
    link element2 
    link element3 



my css 

.testdiv{ 
    position:absolute; 
} 

我想給用戶懸停添加新div每次到我的鏈接和位置的元素的left top。

我的代碼會將所有div放在頂部而不是每個元素上。

有沒有辦法做到這一點？非常感謝！

Answer 1

沒有看到您的其他JavaScript /標記，我可以提出如下意見：

• 您需要設置position:absolute您的新div之前top會做任何事情。
• 您需要確保link不是position:static。
• 像上面這樣的非動態樣式應該放在你的CSS中，而不是JS。
• 定位絕對意味着你不應該需要使用$(div).position()
• 您使用jQuery和純JavaScript的組合看起來有點奇怪:)

JS

function OnHover() { 
    var position; 
    var div = $('<div></div>'); 
    div.addClass('testdiv'); 
    div.html('test'); 
    div.css('top', 15); 
    $(this).prepend(div); 
} 

CSS

.testdiv { 
    position:absolute; 
} 

a.testanchor { 
    position:relative; 
}