title: How can I enable pointer-events to pass through elements without disabling them?
body: <p>So I have a whole list item that I want to be clickable, but there are links inside it that need to be clickable as well. Turns out you cannot nest <code>&lt;a&gt;</code> tags, so instead I made the list item and <code>&lt;a&gt;</code> siblings, and positioned them to overlap.</p>
  
  <p>In order to get the list's link to work, I have to disable pointer events so it passes through to the link below. Then I have to reenable pointer events on each  within the container as they will get disabled when their parent is. </p>
  
  <p>Now the problem is that when you hover over a link within the listing, the background hover ceases to be triggered.</p>
  
  <p>I would like it so when you hover over a link within the container, the link hover is shown (and the href is shown at the bottom), but the link below is still shown in it's hovered state.</p>
  
  <p>Here is the sample, notice how when you hover on the link inside the box, the box stops being hovered.</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-css lang-css prettyprint-override"><code>#listlink {
    height: 100px; width: 100px; top:0; left:0;
    position: absolute;
  
    background: rgba(255,0,0,0.4);
  }
  
  #listlink:hover {  background: rgba(255,0,0,0.8);}
  
  #listitem {
    height: 100px; width: 100px; top:0; left:0;
    position: absolute;
    
    z-index: 10;
    pointer-events: none;
  }
  
  #childlink {
    background: rgba(0,0,255,0.4);
    pointer-events: auto;
  }
  #childlink:hover {  background: rgba(0,0,255,0.8);}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a id="listlink" href="#listlink"&gt;&lt;/a&gt;
  &lt;div id="listitem"&gt;
    Text &lt;a id="childlink" href="#childlink"&gt;top link&lt;/a&gt; text
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>