How can I enable pointer-events to pass through elements without disabling them?

Question

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 <a> tags, so instead I made the list item and <a> siblings, and positioned them to overlap.

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.

Now the problem is that when you hover over a link within the listing, the background hover ceases to be triggered.

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.

Here is the sample, notice how when you hover on the link inside the box, the box stops being hovered.

#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);}

<a id="listlink" href="#listlink"></a>
<div id="listitem">
  Text <a id="childlink" href="#childlink">top link</a> text
</div>

Answer 1

Instead to achieve the required behavior, you can place the whole in a relative container with fixed width and height as shown. And apply the hovereffect to it than #listlink.

.container {
  position: relative;
  height: 100px;
  width: 100px;
  background: rgba(255, 0, 0, 0.4);
}
.container:hover {
  background: rgba(255, 0, 0, 0.8);
}
#listlink {
 /* height: 100px;
  width: 100px;*/
  top: 0;
  bottom:0;
  left: 0;
  right: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;
  bottom:0;
  left: 0;
  right: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);
}

<div class='container'>
  <a id="listlink" href="#listlink"></a>
  <div id="listitem">
    Text <a id="childlink" href="#childlink">top link</a> text
  </div>
</div>