如何在具有绝对位置的元素旁边定位div？

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;
}

每当用户将鼠标悬停在链接上并且位于元素left top位置时，我想添加一个新的div 。

我的代码将所有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;
}