title: add EventListener to element under element
body: <p>I have two images on top of each other.</p>
  <p>I would like to add a <code>mouseenter</code> and <code>mouseleave</code> <strong>EventListener</strong> to the image on the bottom and ​I would like for the EventListeners to completely ignore the image on top.</p>
  <p><strong>How can I do this?</strong></p>
  <hr />
  <p>This is my code: (Fiddle here: <a href="https://jsfiddle.net/tLyk6pxu/" rel="nofollow noreferrer">https://jsfiddle.net/tLyk6pxu/</a>)</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>document.querySelector(".testImageBottom").addEventListener('mouseenter', () =&gt; {
      console.log("trigger: mouseenter");
  });
      
  document.querySelector(".testImageBottom").addEventListener('mouseleave', () =&gt; {
      console.log("trigger: mouseleave");
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>img {
    position: absolute;
  }
  
  .testImageBottom {
    width: 400px;
  }
  
  .testImageTop {
    width: 200px;
    opacity: .5;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;img class="testImageBottom" src="https://images.unsplash.com/photo-1527549993586-dff825b37782?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=2370&amp;q=80" alt="test"&gt;
  
  &lt;img class="testImageTop" src="https://images.unsplash.com/photo-1472396961693-142e6e269027?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=952&amp;q=80" alt="test"&gt;</code></pre>
  </div>
  </div>
  </p>
  <hr />
  <p>As you can see, there are two images on top of each other. – The bottom image has EventListeners for <code>mouseenter</code> and <code>mouseleave</code> and I need these EventListeners to only look at the edges of the bottom-image and ignore the top-image.</p>
  <p><em>I guess I could just create an empty div that has exactly the same size and position as the bottom image and then position that div over everything and add the EventListeners to the empty div. – But I'm hoping that there's a more elegant solution? ;)</em></p>