Javascript jquery:help center图像悬停上的可变大小div

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

（更新为包含图像）

所以当用户将鼠标悬停在图像上时，应该会显示div，其中包含文本“sunny cloudy”，此消息会有所不同，所以可以更小或更大

我希望它在图像的中心。但不幸的是，我的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

试试我的工作（Firefox/Chrome）。标签的图像中间宽度/2是正确的

---

我所做的：我添加了变量名，这有助于确定位置。另外，我将

marginLeft

更改为simply

left

。通过此计算，只要所有内容（图像和标签

div

）都在同一个内，并且不更改其中一个的

position

属性，您就可以了。

如果您的小提琴中没有图像，很难帮助您。@j08691您好，我尝试修复所有图像。请注意，问题只是水平对齐，箭头应直接指向太阳上方。然后重试。我将所有内容重置为您的版本（9），并从12粘贴JavaScript，只更改标签的选择器，CSS和HTML保持不变。太棒了！谢谢：）但是为什么我的没用呢？这在我扭曲的头脑中有点道理：）我认为好的变量名（甚至像

halfOfLabelDivsWidth

这样的名字）对你的例子很有帮助。有了它们，你可以确保一个变量真的包含了正确的值（它以这个值命名），并且在计算其他变量时不再考虑这个问题。是的，得到了。但边际左派不比左派好吗？我通常避免根据浏览器窗口的侧面进行计算。但在这种情况下，这并不重要，对吗？实际上取决于周围环境/偏移父对象（即位置所依赖的元素）。我通常尽量避免负利润。另外，

left

用于定位，

margin

用于。。。井距：）