How to click through an object that doesn't completely cover the background and disappear on hover

Question

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 objects that disappear, with a small modification.

In the question above, the object that was on top, covered completely the other four boxes. But what if you don't?

Meaning, what if you have four boxes, an alpha: .5 on top which is the same size that the other four which is centered, and you want to be able to hover over the last box so that it is not visible, and you're able to click in the place where it was before and when you move your cursor out of the way, the middle box will go back to it's original state(alpha: .5).

And here is where you're implementing it:

$(function() {

  $("#box_a").click(function() {
    alert("you clicked box_a");
  });

  $("#box_b").click(function() {
    alert("you clicked box_b");
  });

  $("#box_c").click(function() {
    alert("you clicked box_c");
  });

  $("#box_d").click(function() {
    alert("you clicked box_d");
  });

  $("#box_e").click(function() {
    alert("you clicked box_e(this shouldn't happen!)");
  }).mouseenter(function() {
    $(this).fadeTo(0,0).addClass("noevents");
  });

  $(".box").mouseleave(function(e) {
    if(e.relatedTarget.className != 'box') {
      $("#box_e").fadeTo(0,0.5).removeClass("noevents");
    }
  })
});

#box_a, #box_b, #box_c, #box_d {
 height: 100px;
 width: 100px;
 position: relative;
}

#box_a {
 top:0px;
 left:0px;
 background-color: red;
}

#box_b {
 top:-100px;
 left:100px;
 background-color: blue;
}

#box_c {
 top:-100px;
 left:0px;
 background-color: yellow;
}

#box_d {
 top:-200px;
 left:100px;
 background-color: green;
}

#box_e {
 width:100px;
 height:100px;
 top:-350px;
 left:50px;
 background-color: black;
 opacity: .5;
 position: relative;
}

.noevents {
 pointer-events: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box_a" class="box"></div>
<div id="box_b" class="box"></div>
<div id="box_c" class="box"></div>
<div id="box_d" class="box"></div>
<div id="box_e"></div>

As you can see, this code works pretty well, except that when you leave the area where middle box should be, the #box_e does not come back, and actually it doesn't go back to alpha: .5 until your cursor is not over any of the four boxes, which is not what should happen. What should happen is that when you leave the area of where #box_e "is" #box_e should go back to alpha: .5 EVEN if your cursor is on top of any of the other boxes.

EDIT

Try to make this so that it doesn't work just for this specific example. Your answer MUST be flexible to where ever I'm needing to put #box_e. Let's say that #box_e is one pixel below what it is in this minimalist example, then I would have to modify absolutely everything, which is not the goal here.

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

function elementOut(e) {

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

return !onelement;
}
});

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