Question

我有图像网格，当鼠标悬停在任何给定图像上时，该图像的较大版本将成为原始网格图像的稍大版本的叠加。

Mouseover效果很好。但mouseout和mouseleave都会导致较大的图像立即淡出。鼠标是否结束。

        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');
            });

理想情况下，当鼠标悬停在相应的网格图像上时，我希望覆盖图像保持可见和就位。当用户将鼠标放置到另一个网格图像时，旧的叠加层淡出。

Answer 1

问题是当弹出覆盖图时，它会阻止来自底层元素的鼠标事件。它基本上可以从其下面的任何东西中窃取鼠标事件。因此，您会在下面的元素上收到mouseout事件。

相对于底层元素触发鼠标位置有点棘手。您可能需要创建mousemove事件，以查看鼠标是否离开原始div的边界。

如果您的功能略有不同，则可以在叠加图片上触发mouseout。

这是一个演示，我将一个图像网格放在一起，当你mouseenter另一个网格元素（不在叠加层下）时，它会关闭其他叠加层：

演示：http://jsfiddle.net/jtbowden/29U93/

其他几点说明：

您为什么使用new Image()？只需使用jQuery的内置克隆功能。
你正在做$(clone).insertAfter($('BODY'))。您无法合法追加body之后的任何内容。您需要appendTo('body')。

修改：

我意识到有一种相当简单的方法可以做到这一点！

制作一个具有高z-index的透明网格，该网格位于图像网格的顶部，div与网格项匹配。使用它们来触发您的叠加层弹出（在透明网格下）。

演示：http://jsfiddle.net/jtbowden/S6AvH/1/

此演示手动创建透明网格，并使用javascript放置它，但您可以使用javascript完成整个过程。

鼠标悬停和鼠标移出的问题

1 个答案: