mouseover 和 mouseout 的问题

Question

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

鼠标悬停效果很好。但是 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/

其他几点说明：

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

编辑：

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

在图像网格的顶部创建一个具有高 z-index 的透明网格，其中的 div 与您的网格项目相匹配。使用这些来触发您的叠加层弹出（在透明网格下）。

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

此演示手动创建透明网格，并使用 javascript 放置它，但您可以使用 javascript 来放置整个东西。