0

我正在尝试创建一个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 放在顶部而不是每个元素。

有没有办法做到这一点？非常感谢！

4

1 回答 1

2

在没有看到您的其他 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;
}
于 2013-04-16T00:30:52.953 回答