鼠标悬停在覆盖的 DIV 上

Question

我div有一个图像，其中覆盖了许多其他divs。像这样的东西：

<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元素上时，请观察您的控制台以查看日志）