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