我怎样才能使指针事件通过元素而不禁用它们？

Question

所以我有一个完整的列表项，我希望它是可点击的，但其中有 links 也需要被点击。事实证明你不能嵌套 <a> 标签，所以我将列表项和 <a> 设为兄弟姐妹，并将它们放置在重叠的位置。

为了让列表的 link 工作，我必须禁用指针事件，以便它传递到下面的 link。然后我必须在容器内的每个容器上重新启用指针事件，因为当它们的父对象关闭时它们将被禁用。

现在的问题是，当您将鼠标悬停在列表中的 link 上时，将不再触发背景悬停。

我希望如此，当您将鼠标悬停在容器内的 link 上时，会显示 link 悬停（并且 href 显示在底部），但是 link 下面仍显示为悬停状态。

这是示例，请注意当您将鼠标悬停在框内的 link 上时，框会停止悬停。

#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

为了实现所需的行为，您可以将整个容器放入固定 width 和 height 的 relative 容器中，如图所示。并对其应用 hover 效果而不是 #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>

我怎样才能使指针事件通过元素而不禁用它们？

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

html

css

hyperlink

anchor

pointer-events