CODEWITHSUNDEEP
javascriptjqueryhover
robjtede
robjtede

Reputation: 746

jQuery hover detection through another element?

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.

Upvotes: 3

Views: 1232

Answers (1)

charlietfl
charlietfl

Reputation: 171679

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

Upvotes: 1

Related Questions