title: How to click through an object that doesn't completely cover the background and disappear on hover while exiting the element through window object
body: <blockquote>
    <p>This question is related to but not the same as <a href="https://stackoverflow.com/questions/32927336/how-to-click-through-an-object-that-doesnt-completely-cover-the-background-and">How to click through an object that doesn&#39;t completely cover the background and disappear on hover</a></p>
    
    <p>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</p>
  </blockquote>
  
  <p>If you read the question above, you understand that the accepted answer works, which is:</p>
  
  <pre><code>$(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) &amp;&amp; box.hasClass('noevents')) {
      box.fadeTo(0,0.5).removeClass('noevents');
      }
  });
  
  function elementOut(e) {
  
  var x = e.pageX, y = e.pageY,
  onelement = x &gt;= xmin &amp;&amp; x &lt;= xmax &amp;&amp; y &gt;= ymin &amp;&amp; y &lt;= ymax;
  
  return !onelement;
  }
  });
  </code></pre>
  
  <p>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 <code>div</code>, it will disappear, and you will be able to trigger the events that were hidden behind the object.</p>
  
  <p>This tiny snippet is quite powerful, here's a demo:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(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) &amp;&amp; box.hasClass('noevents')) {
   box.fadeTo(0,0.5).removeClass('noevents');
   }
  });
  
  function elementOut(e) {
  
  var x = e.pageX, y = e.pageY,
  onelement = x &gt;= xmin &amp;&amp; x &lt;= xmax &amp;&amp; y &gt;= ymin &amp;&amp; y &lt;= ymax;
  
  return !onelement;
  }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="box_a" class="box"&gt;&lt;/div&gt;
  &lt;div id="box_b" class="box"&gt;&lt;/div&gt;
  &lt;div id="box_c" class="box"&gt;&lt;/div&gt;
  &lt;div id="box_d" class="box"&gt;&lt;/div&gt;
  &lt;div id="box_e"&gt;&lt;/div&gt;
  
  &lt;!--
  red   ,  blue
  yellow, green
  --&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Which describes and answers the question perfectly. But there is a little tiny bug.</p>
  
  <p>Consider this new snippet:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(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) &amp;&amp; box.hasClass('noevents')) {
   box.fadeTo(0,0.5).removeClass('noevents');
   }
  });
  
  function elementOut(e) {
  
  var x = e.pageX, y = e.pageY,
  onelement = x &gt;= xmin &amp;&amp; x &lt;= xmax &amp;&amp; y &gt;= ymin &amp;&amp; y &lt;= ymax;
  
  return !onelement;
  }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="box_a" class="box"&gt;&lt;/div&gt;
  &lt;!-- &lt;div id="box_b" class="box"&gt;&lt;/div&gt; --&gt;
  &lt;div id="box_c" class="box"&gt;&lt;/div&gt;
  &lt;div id="box_d" class="box"&gt;&lt;/div&gt;
  &lt;div id="box_e"&gt;&lt;/div&gt;
  
  &lt;!--
  red   ,  blue
  yellow, green
  --&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Notice that it is the same thing, while missing box <code>b</code>. 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.</p>
  
  <p>This is a minor bug but important after all.</p>
  
  <p>Also, the <code>JS</code> and <code>CSS</code> for both snippets are <em>"exactly"</em> the same.</p>