javascript - jquery：帮助中心在图像悬停时可变大小的 div

Question

我有一个小问题我不明白。我做了一个jsfiddle来说明它。

http://jsfiddle.net/sandrodz/czfGy/9/（更新为包括图片）

因此，当用户将鼠标悬停在图像上时，应该显示包含文本“晴天多云”的 div，此按摩会有所不同，因此可以更小或更大。

我希望它以图像为中心。但不幸的是，我的 jquery 逻辑无法正常工作，并且悬停似乎向左移动。

有任何想法吗？

$("#tempicon img").hover(function() {
    divW = ($(this).next("div").width() / 2) - ($(this).outerWidth() / 2);
    $(this).next("div").css({marginLeft: -divW }).animate({ opacity: "show" }, "fast");
}, function() {
    $(this).next("div").animate({opacity: "hide"}, "fast");
});

为了增加混乱，我在另一个 div 上使用了相同的确切代码，它完美地工作：S

Answer 1

试试我的工作更新（Firefox/Chrome）。middle of image - width/2 of label是正确的。

我做了什么：我添加了变量名，这在确定定位时应该会有所帮助。另外，我将其更改marginLeft为简单的left. 通过这种计算，只要所有内容（图像和标签div）都在同一个“偏移父级”内并且您不更改position其中一个的属性，您应该没问题。