Jquery doesn't delete div always on mouseleave

Question

This is very annoying. After you flipped the image, if you expand the left, top or right red field disappears. But if you push out from the bottom, the red box sometimes sometimes disappears. Why is this?

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

Edit: Another weird thing: when you check the console log, mouseleave fires, but does not delete the div !!!.

Edit 2: It’s good that both answers solved the problem, but still I wonder how on the ground console.log registers the mouse in the source code, but does not call remove ()?

Answer 1

display: block for image solves the problem

Answer 2

I think the outer div is creating some problem, so 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(); });