jquery - 鼠标悬停在覆盖的 DIV 上

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 元素的尺寸相同，那么您只需绑定(bind)到叠加层的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 元素上时，请观察控制台以查看日志)