jquery doesn't remove div always on mouseleave

This is very annoying. A开发者_如何转开发fter you rollover on image, if you rollout from left, top or right edges red box disappears. But if you rollout from bottom edge red box sometimes disappears sometimes not. Why is that?

http://jsfiddle.net/f98r3/2/

Edit: Another weird thing is, when you check console log, mouseleave fires but doesn't remove div!!!.

Edit 2: Ok both answers solved the problem but still I wonder how on earth console.log logs the mouseleave in the original code but doesn't trigger remove()?

---

display: block for image solves the problem

---

I think that the outer div creates some problem, this way it works:

http://jsfiddle.net/f98r3/5/

$("img").bind("mouseenter", function () {
    $("#enlargemag").remove();
    var imgobj = this;
    var w = $(imgobj).width();
    var h = $(imgobj).height();
    var p = $(imgobj).position();
    $("<div id='enlargemag' style='border:none;cursor:pointer;position:absolute;top:" + p.top + "px;left:" + p.left + "px;width:" + w + "px;height:" + h + "px;background-color:#FF0000;'></div>").appendTo("body");
});
$("#enlargemag").live("mouseleave", function () {
    console.log("mouselave");
    $("#enlargemag").remove();
});