Question

I have a little problem I don’t understand. I made a jsfiddle to illustrate it.

http://jsfiddle.net/sandrodz/czfGy/9/ (updated to include images)

So when user hovers on image it should div is revealed which contains text “sunny cloudy” this massage varies so it can be smaller or larger.

I want it centered over the image. But unfortunately my jquery logic doesn’t work correctly and hover appears shifted to the left.

Any ideas?

$("#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");
});

To add to the confusion, I use same exact code on the other div and it works perfectly :S

Answer 1

Try my working update (Firefox/Chrome). The middle of image - width/2 of label is correct.

What I did: I added variable names which should help while figuring out the positioning. Also, I change the marginLeft to simply left. With this calculation, you should be ok as long as everything (image and label div) is inside the same “offset parent” and you don’t change the position property of one of them.