How To Click Through An Object That Doesn't Completely Cover The Background And Disappear On Hover

This is an even further continuation to How to click through objects and to How to click through objects that disappear This question is much related to How to click through object

Solution 1:

Here's a way, keeping track of where the mouse is (in this case only when it's over the boxes to keep down the impact on performance) and checking if it is outside of where the center element should be :

Demo

$(function() {

var box = $('#box_e'),
w = box.outerWidth(),
h = box.outerHeight(),
xmin = box.offset().left,
xmax = xmin + w,
ymin = box.offset().top,
ymax = ymin + h;

box.mouseenter(function() {

    $(this).fadeTo(0,0).addClass('noevents');
});

$('.box').mousemove(function(e) {

    if (elementOut(e) && box.hasClass('noevents')) {
    box.fadeTo(0,0.5).removeClass('noevents');
    }
});

functionelementOut(e) {

var x = e.pageX, y = e.pageY,
onelement = x >= xmin && x <= xmax && y >= ymin && y <= ymax;

return !onelement;
}
});

Solution 2:

I think for this issue you could use pointer-event property as well..

You can change the property when you are hover a box and then change it again when you are out of the box.