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イベントが発生します。

マウスの位置をトリガにするのは、基本となる要素に比べてややこしいことです。マウスが元のdivの境界線から離れるかどうかを確認するイベントをmousemoveにする必要があります。

わずかに異なる機能を使用することができれば、オーバーレイ画像のmouseoutをトリガーできます。

ここ

は、私はあなたがmouseenter別のグリッド要素（つまり、オーバーレイの下ではない）他のオーバーレイを閉じた画像のグリッドと一緒に入れデモです：

デモ：http://jsfiddle.net/jtbowden/29U93/

のカップルその他のメモ：

1. なぜあなたはnew Image()を使用していますか？ jQueryの組み込みクローン機能を使用するだけです。
2. $(clone).insertAfter($('BODY'))を実行しています。合法的にbodyの後には何も追加できません。 appendTo('body')をする必要があります。

EDIT：

私はこれを行うにはかなり簡単な方法があります実現！

グリッドアイテムに一致するdivを使用して、イメージグリッドの上にある高いzインデックスの透明なグリッドを作成します。オーバレイをポップアップ（透明なグリッドの下）にトリガするために使用します。

デモ：http://jsfiddle.net/jtbowden/S6AvH/1/

このデモでは、手動で透明グリッドを作成し、JavaScriptでそれを置きますが、あなたはJavaScriptを使用して全体のものにできました。