Javascript 悬停时，将焦点放在其他元素后面（z顺序）

我得到了一个图像，使用JQuery我得到了它，这样当你将鼠标悬停在图像上时，图像的大小会增加，而图像下方的DIV会向上滑动，并在图像上提供一个覆盖，该覆盖是半不透明的，并占据图像区域的下半部分

这很好，但是，当您将鼠标悬停在覆盖上但仍与图像在同一区域时，图像会再次缩小，因为您不再关注图像，因此会触发“悬停”事件

---

当您将鼠标悬停在覆盖上时，只要您仍在图像区域内，您如何忽略覆盖，就好像在说我不在乎一样？

您可以使用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')
            }

        })

---

请查看此处的live:

如果您提供一个live示例，您将更容易获得帮助。非常适合于此。问题是，当您使用[link]上的HoverPulse脚本将鼠标悬停在图像上时，图像的大小会增加。屏幕上有多个图像，比如那个例子，所以我不确定窗口事件是否是最好的解决方案。明天在我的另一台计算机上拿到代码后，我会试试看。你可以为每个图像更改添加mousemove处理程序$image到实际的图像对象，并且，正如你所看到的，处理程序每次都计算当前维度，这对性能不是很理想。因此，基本上它应该与多个图像一起工作，并正确处理图像大小调整。