This question is related to but not the same as How to click through an object that doesn't completely cover the background and disappear on hover
IMPORTANT - Please take a look at the question above which contains background info, or you will most likely not understand what this question is about
If you read the question above, you understand that the accepted answer works, which is:
$(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;
}
});
Of course, all of this in meaningless unless you have some background knowledge. The original question was, "How to click through an object that doesn't completely cover the background and disappears on hover", meaning that whenever you hover over this div, it will disappear, and you will be able to trigger the events that were hidden behind the object.
This tiny snippet is quite powerful, here's a 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;
}
});#box_a, #box_b, #box_c, #box_d {
height: 100px;
width: 100px;
position: absolute;
}
#box_a {
top: 0px;
left: 0px;
background-color: red;
}
#box_b {
top: 0px;
left: 100px;
background-color: blue;
}
#box_c {
top: 100px;
left: 0px;
background-color: yellow;
}
#box_d {
top: 100px;
left: 100px;
background-color: green;
}
#box_e {
width: 100px;
height: 100px;
position: absolute;
top: 50px;
left: 50px;
background-color: black;
opacity: .5;
}
.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>
<!--
red , blue
yellow, green
-->Which describes and answers the question perfectly. But there is a little tiny bug.
Consider this new snippet:
$(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;
}
});#box_a, #box_b, #box_c, #box_d {
height: 100px;
width: 100px;
position: absolute;
}
#box_a {
top: 0px;
left: 0px;
background-color: red;
}
#box_b {
top: 0px;
left: 100px;
background-color: blue;
}
#box_c {
top: 100px;
left: 0px;
background-color: yellow;
}
#box_d {
top: 100px;
left: 100px;
background-color: green;
}
#box_e {
width: 100px;
height: 100px;
position: absolute;
top: 50px;
left: 50px;
background-color: black;
opacity: .5;
}
.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>
<!--
red , blue
yellow, green
-->Notice that it is the same thing, while missing box b. Also, notice how when you enter the transparent box, that same one disappears. If you exit through one of the boxes, the transparent box "automatically" appears again. But if you exit the transparent box through the top right corner where the DOM object is window, the box doesn't appear again until you hover over one of the three boxes.
This is a minor bug but important after all.
Also, the JS and CSS for both snippets are "exactly" the same.
