ホバリング時に他の（zオーダー）の背後にある要素に焦点を当ててください

Question

私は画像を持っていますが、JQueryを使用すると、その画像の上にマウスを置くと画像が大きくなります画像は上にスライドし、半透明で画像領域の下半分を占める画像上にオーバーレイを提供する。

これはうまくいきますが、オーバーレイの上にマウスを置いても（イメージと同じ領域に）、イメージは表示されなくなるため、画像が縮小されるため、ホバーアウトイベントが発生します発砲した。

「画像の領域にいる限り、オーバーレイの上にマウスを置いたときに気にしない」というように、ホバーオーバーレイを無視する方法を教えてください。

Answer 1

mouseenterとmouseleaveの代わりにmousemoveイベントを使用し、画像の寸法を使用してマウスが画像上にあるかどうかを判断できます。

例：ここでライブ

 $(window).mousemove(function(evt) { 
      var image = $("#image"); 
      var imageX0 = image.offset().left 
      var imageY0 = image.offset().top 
      var imageX1 = imageX0 + image.width() 
      var imageY1 = imageY0 + image.height() 
      if(evt.pageX >= imageX0 && evt.pageX <= imageX1 && evt.pageY >= imageY0 && evt.pageY <= imageY1) { 
       $("#status").text('Hovered!') 
      } else { 
       $("#status").text('Not hovered') 
      } 

     }) 

チェックアウト：http://dl.dropbox.com/u/486054/stackoverflow/hover-overlay.html