javascript - 如何将 div 放置在具有绝对位置的元素旁边？

Question

我正在尝试创建一个 div，只要用户将鼠标悬停在链接上，它就可以附加到一个元素上

我有很多链接，我的代码如下所示。

for 循环 创建多个链接

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/标记的情况下，我可以做出以下观察:

• 在 top 执行任何操作之前，您需要在新的 div 上设置 position:absolute。
• 您需要确保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;
}