Problems with mouseover and mouseout

Question

I have grid of images, when the mouse is over any given image a larger version of that image becomes an overlay coming the original grid image with a slightly larger version.

Mouseover works great. but mouseout and mouseleave both cause the larger image to instantly fadeout. Whether the mouse is over or not.

        function imageSize(img){
              var theImage = new Image();
              $(theImage).load(function() {
                var imgwidth = this.width;
                var imgheight = this.height;
                var position = img.parent().position()
                var index = img.parent().index();


                ///calculate top
                var top     = (position.top -((imgheight-img.height())/2));
                var left    = (position.left -((imgwidth-img.width())/2));


                /// place image in img_pop
                var clone;
                clone = '<div class="pop_img clone'+index+'"></div>';
                $(clone).insertAfter($('BODY'));


                $('.pop_img.clone'+index+'').css({
                    'width'                 :   img.width(),
                    'height'                :   img.height(),
                    'top'                   :   position.top,
                    'left'                  :   position.left,
                    'backgroundImage'       :   'url('+theImage.src+')',
                });

                    $('.pop_img.clone'+index+'').stop().animate({
                        'height'    :   imgheight,
                        'top'       :   top,
                        'width'     :   imgwidth,
                        'left'      :   left,
                    },300,'easeInOutQuad');

              });
              theImage.src = img.attr('src');
            }

            $('.am-wrapper img').live('mouseenter',function(){
                imageSize($(this));
            });

            $('.am-wrapper img').live('mouseleave',function(){
                thisIndex = $(this).parent().index();
                $('.pop_img.clone'+thisIndex+'').fadeOut('200');
            });

I ideally want the overlay image to stay visible and in place while the mouse is over the respective grid image. The when the user places mouse of the another grid image, the old overlay fades out.

Answer 1

The problem is that when the overlay pops up, it blocks the mouse event from the underlying element. It basically steals the mouse events from anything underneath it. So, you get a mouseout event on the element underneath.

It is somewhat tricky to trigger on mouse position relative to an underlying element. You might need to make a mousemove event that sees if the mouse leaves the boundaries of the original div.

If you can live with a slightly different functionality, you could trigger the mouseout on the overlay image.

Here is a demo I put together with a grid of images that closes other overlays when you mouseenter another grid element (that isn't under the overlay):

Demo: http://jsfiddle.net/jtbowden/29U93/

A couple of other notes:

1. Why are you using new Image()? Just use jQuery's built-in clone functionality.
2. You are doing $(clone).insertAfter($('BODY')). You cannot append anything after body legally. You need to do appendTo('body').

EDIT:

I realized there is a fairly easy way to do this!

Make a transparent grid with a high z-index that sits on top of your image grid, with div's that match your grid items. Use those to trigger your overlay to pop-up (under the transparent grid).

Demo: http://jsfiddle.net/jtbowden/S6AvH/1/

This demo creates the transparent grid manually, and places it with javascript, but you could to the whole thing with javascript.