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

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

我做了什么：我添加了变量名称，这些名称在确定定位时应该有所帮助。另外，我将marginLeft更改为left。通过这种计算，只要所有内容（图像和标签div）都位于同一"offset parent"内，并且您不更改其中一个position属性，就应该没问题。< / p>

jquery：帮助中心变量大小div在图像悬停

1 个答案: