3

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

鼠标悬停效果很好。但是 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');
            });

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

4

1 回答 1

2

问题是当覆盖层弹出时，它会阻止底层元素的鼠标事件。它基本上从它下面的任何东西中窃取鼠标事件。因此，您会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 来完成整个事情。

于 2012-04-11T23:09:51.097 回答