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

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

1 个答案: