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

反正有吗? 非常感谢!

===============>>#1 票数:2 已采纳

在没有看到您的其他JavaScript /标记的情况下,我可以进行以下观察:

  • 您需要设置position:absolute在你的新divtop会做任何事情。
  • 您需要确保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;
}

  ask by FlyingCat translate from so

未解决问题?本站智能推荐: