悬停时,请关注其他(z顺序)后面的元素

时间:2012-04-29 09:37:40

标签: javascript jquery css

我已经获得了一张图片,并且使用了JQuery我已经得到它,以便当您将鼠标悬停在图像上时图像会增大,并且位于图像下方的DIV会向上滑动并提供叠加效果在半透明度的图像上占据图像区域的下半部分。

这样可以正常工作,但是当您将鼠标悬停在叠加层上(但仍然与图像位于同一区域)时,图像会再缩小,因为您不再关注图像,因此悬停事件被解雇了。

当你悬停时如何忽略叠加效果,就好像说"当你将鼠标悬停在叠加层上时我不在乎,只要你还在图像的区域内&#34 ;

1 个答案:

答案 0 :(得分:0)

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