绝对中心*高于* div，具有不同大小的内容

Question

我有这个脚本： http://jsfiddle.net/ZhXf5/3/

当您将鼠标悬停在其中一个框上时，“popup”div位于包含不同尺寸图像的框上方。如何将这些不同大小的图像放在div上方？

Answer 1

在加载图像以正确放置缩略图后，您需要做更多的数学运算（updated jsfiddle）：

$("document").ready(function () {

    $("div.box").hover(function() {

        var positionleft = $(this).position().left + $(this).outerWidth() / 2;
        var positiontop = $(this).position().top;

        var img = $("<img src='"+$(this).text()+"' />");
        $("div.popup div.image").html(img);

        img.load(function() {
            $("div.popup").css({
                display: 'block',
                left: positionleft - (img.outerWidth() / 2),
                top: positiontop - img.outerHeight() - 20,
            });   
        });
    });   

});​