javascript - 悬停时将注意力集中在其他元素后面（z 顺序）

Question

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

这很好用，但是当您将鼠标悬停在叠加层上（但仍与图像位于同一区域）时，图像会再次缩小，因为您不再专注于图像，因此会触发悬停事件。

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

Answer 1

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