jquery - 用jquery居中悬停气泡

Question

当用户将鼠标悬停在红色框上时，我想用 jquery 显示弹出气泡。问题是我只是通过实验将代码组合在一起......这没有任何意义！

http://jsfiddle.net/PKzsS/

$(window).load(function() {
    $("#headloginuser ul li a").hover(function() {
        divW = $(this).next("div").width()/4;
        $(this).next("div").css({marginLeft: -divW }).animate({ opacity: "show" }, "fast");
    }, function() {
        $(this).next("div").animate({opacity: "hide"}, "fast");
    });
});

这或多或少地居中，当然不是完美的:) 但我将宽度除以 4！我不应该把它除以2吗？所以我有隐藏 div 宽度的一半，我把它移到左边那个长度？

我很困惑 ：）

S。

Answer 1

是的，除以 2 将使您几乎到达那里。但要知道，这将使它相对于它的起点居中，恰好与上面红色框的左侧相匹配。我假设您正在尝试相对于框的中心居中，如果是这样，您还需要考虑框的宽度除以 2。

我修改了以下行，它似乎居中很好：

divW = ($(this).next("div").width() / 2) - ($(this).outerWidth() / 2);

- 编辑 -

我已经切换到使用outerWidth()而不是width()因为我注意到你在第三个按钮上有填充。不确定您是否要考虑这一点。