Question

I’ve got a div with an image in it that is covering a bunch of other divs. Something like this:

<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>

I want to define a jQuery event handler like this:

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

But the mouseover event isn’t working because of the div that is covering it. Is there any way to get this to work?

(Notes… the div covering it does have a higher z-index because it needs to always be layered on top. And I’m using “live” because #covered get generated dynamically.)

Answer 1

If the overlay is the same dimensions as the #covered element then you can just bind to the mouseover event for the overlay:

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

Update

If the overlay is covering the whole page then you can check the mousemove event to see if the cursor has been moved over the #covered element:

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');
    }
});​​​​

Here is a demo: http://jsfiddle.net/WjRNv/1/ (watch your console to see the log when you mouse-over the #covered element)