将鼠标悬停在其他元素（z顺序）上时关注点

我已经有了图像，并且使用JQuery我已经掌握了它，以便在将鼠标悬停在图像上时，图像的大小会增加，并且坐标下的DIV图像将向上滑动并在半透明图像上提供覆盖图像，并占据图像区域的下半部分。将鼠标悬停在其他元素（z顺序）上时关注点

这可以正常工作，但是当您将鼠标悬停在叠加层上时（但仍与图像位于同一区域）时，图像会再次缩小，因为您不再关注图像，所以悬停事件获取被解雇。

当你悬停时，你如何忽略覆盖层，就好像说“我不在乎你悬停在覆盖层上，只要你还在图像的区域内”？

2012-04-29 daniel churchill

这是很容易帮助你，如果你提供了一个活生生的例子。 http://jsfiddle.net/是完美的 – skip405 2012-04-29 10:20:36

您可以使用mousemove事件而不是mouseenter和mouseleave，并使用图像尺寸来确定鼠标是否在图像上。

例子：

 $(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

来源

2012-04-29 10:30:45 daeq

嗯问题是，当你将鼠标悬停在图像上时，图像的大小将会增加，使用[链接]上的HoverPulse脚本http://jquery.malsup.com/hoverpulse/ 。并且屏幕上有多个图像（如该示例），所以我不确定窗口事件是否是最佳解决方案。当我明天在另一台电脑上看到代码时，我会试试看。 – 2012-04-29 10:34:48

您可以为每个图像添加mousemove处理程序（将$（“＃image”）更改为实际图像对象），并且，正如您所看到的，处理程序每次都计算当前维度（对于性能而言不是最佳的）。所以基本上它应该适用于多个图像并正确处理图像大小调整。 – daeq 2012-04-29 10:46:33

将鼠标悬停在其他元素（z顺序）上时关注点

回答

相关问题