Question

我有一个div，其中包含一个覆盖其他div个图像的图像。像这样：

<div style='width:100%;height:100%'><img src='someImage.png'></div>
<div id='covered'>I'm covered by the div above me, but still visible</div>

我想定义一个像这样的jQuery事件处理程序：

$('#covered').live('mouseover',function(){ do stuff });

但mouseover事件由于覆盖它的div而无效。有没有办法让这个工作？

（注意......覆盖它的div确实有更高的z-index，因为它需要始终分层在顶层。而我正在使用“live”因为#covered动态生成。）

Answer 1

如果叠加层与#covered元素的尺寸相同，那么您只需绑定到叠加层的mouseover事件：

$(document).delegate('#overlay', 'mouseover', function () { /*run code for `#covered` element*/ });

更新

如果叠加层覆盖整个页面，那么您可以检查mousemove事件以查看光标是否已移动到#covered元素上：

var coveredOffset = $('#covered').offset(),
    coveredWidth  = $('#covered').width(),
    coveredHeight = $('#covered').height();
$('#overlay').on('mousemove', function (event) {
    if (event.pageX > coveredOffset.left && event.pageX < (coveredOffset.left + coveredWidth) && event.pageY > coveredOffset.top && event.pageY < (coveredOffset.top + coveredHeight)) {
        console.log('You are mouse-overing #covered');
    }
});

这是一个演示：http://jsfiddle.net/WjRNv/1/（在鼠标悬停在#covered元素上时，请注意您的控制台以查看日志）

Answer 2

选项是使用pointer-events: none。考虑到它在低于9的IE版本中不起作用，并且在某些情况下在IE9中有问题。

但最好修改你的造型方法。如果封面DIV是透明的，则可能位于当前位于其下的元素下。

Answer 3

$('#covered').live('mouseenter',function(){ do stuff });

Answer 4

$('#covered').mousenter(function(){do stuff}).mouseleave(function(){do so more stuff});

如果问题是覆盖div，您可能希望使用css将该图像放在那里。使用css 3，您可以拥有多个背景，并且它们可以在Photoshop图层中工作。通过这样做，一切看起来都一样，但你的js将完美地运作。

Answer 5

您可以执行其他操作，并检查鼠标位置的x / y值与要检测事件的div的左/上偏移量。

var topOffset = $("#cover").offset().top,
    leftOffset = $("#cover").offset().left,
    bottomOffset = topOffset + $("#cover").height(),
    rightOffset = leftOffset + $("#cover").width();
$("body").on("mousemove", function(e){
    var mouseX = e.pageX,
        mouseY = e.pageY;
    if(pageX > leftOffset && pageX < rightOffset && pageY > topOffset && pageY < bottomOffset){
        // mouse is within boundaries
    } else {
        // mouse is not within boundaries
    }
});

当然，当你有填充，边距等时，这会成为问题。而且它有点难以维护，但它很有意义。

鼠标悬停在涵盖的DIV上

5 个答案:

更新