鼠標懸停和鼠標懸停的問題

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值索引製作一個透明網格，並使用與網格項匹配的div。使用這些觸發覆蓋圖來彈出（在透明網格下）。

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

這個演示手工創建透明的網格，並與JavaScript的地方，但你可以使用JavaScript向整個事情。