单击复选框后，如何从页面上其他位置的div浮动到该复选框旁边？

Question

I have a checkbox. I want a div which is on the bottom of my page to float next to the checkbox when the checkbox has been clicked.

How can I do this?

Here is some code that is working for my mouseovers. Its pretty far beyond my level. Is there an easier way, or way I can use this code for checkboxes as well?

function addreflinkpreview(e) {
var c;
var d = "srcElement";
var f = "href";
this[f] ? c = this : c = e[d];
ainfo = c.className.split('|');
var g = document.createElement('div');
g.setAttribute("id", "preview" + c.className);
g.setAttribute('class', 'reflinkpreview');
g.setAttribute('className', 'reflinkpreview');
if (e.pageX) {
    g.style.left = '' + (e.pageX + 50) + 'px'
} else {
    g.style.left = (e.clientX + 50)
}
var h = document.createTextNode('');
g.appendChild(h);
var i = c.parentNode;
var j = i.insertBefore(g, c);
new Ajax.Request(ku_boardspath + '/read.php?b=' + ainfo[1] + '&t=' + ainfo[2] + '&p=' + ainfo[3] + '&single',{
    method: 'get',
    onSuccess: function(a) {
        var b = a.responseText || _("something went wrong (blank response)");
        j.innerHTML = b
    },
    onFailure: function() {
        alert('wut')
    }
})

}

Answer 1

One way you may be able to achieve this is with positioning and transitions. Take the screen coordinates of the click event and then absolute position the div next to the coordinate by adding or subtracting from the x-coordinate.