jQuery hover detection through another element?

Question

I am trying to make a custom jQuery drag and drop function for a project of mine.

The problem I'm having is that when dragging on element it is put between the mouse and the drop region and I can't find a decent way of detecting the hover over the drop region through the dragging element without it being offset slightly.

$(window).mousemove(function (event) {
    $('.element').css({
        'left' : event.pageX-30 + 'px',
        'top' : event.pageY-30 + 'px'
    });
});

The above code moves a simple <span> to match the mouse position.

$('.dropregion').hover(function () {
    console.log('hover');
}, function () {
    console.log('unhover');
});

This is the simple hover detection that I am used to with jQuery.

Answer 1

You could try disabling mouse events on the span using css which should render it transparent to the mouse and allow hover to activate under the span

CSS:

.element {pointer-events:none} 

Reference:

https://developer.mozilla.org/en-US/docs/CSS/pointer-events