title: how do i trigger onMouseEnter for elements behind other elements
body: <p>I'm trying to trigger <code>mouseEnter</code> event when mouse is on top of multiple elements.</p>
  <p>I want both <code>mouseEnter</code> events to trigger when the mouse is at the center, and preferably for both to turn yellow.</p>
  <p>Run the code snippet below for an example:</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-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
  div:hover {
    background-color: yellow;
  }
  div {
    width: 100px;
    height:100px;
    background:green;
    border: 2px solid black;
  }
  .second {
    transform:translateX(50%) translateY(-50%);
  }
  &lt;/style&gt;
  &lt;script&gt;
    function onhover(){console.log('hovered')}
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div onmouseenter=onhover()&gt;&lt;/div&gt;
  &lt;div onmouseenter=onhover() class='second'&gt;&lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>