1

我有一个小问题我不明白。我做了一个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

4

1 回答 1

0

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

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

于 2012-07-11T22:02:44.873 回答