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

Question

I am trying to create a div that can be attached to an element whenever user hover to the link

I have many links and my codes look like the following.

for loops to create many links

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

I want to add a new div everytime the user hover to my link and position on the left top of the element.

My code would position all the div on top instead of every element.

Are there anyway to do this? Thanks so much!

Answer 1

Without seeing your other JavaScript/markup I can make the following observations:

• You need to set position:absolute on your new div before top will do anything.
• You need to make sure link is non- position:static .
• Non-dynamic styles like the above should be in your CSS, not JS.
• Positioning absolutely means you shouldn't need to use $(div).position()
• You're using a mix of jQuery and pure JavaScript which looks a little odd :)

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