h1用其中的锚点阻挡其他h1

Question

我有两个h1元素，一个是副标题，使用z-index放在第一个元素后面。我想点击第一个h1。这个点击需要转到jQuery，因为我将使用它来停止播放视频等。我曾经点击过第一个h1本身，但由于它是一个块元素，因此它在整个页面宽度上被拉伸时并不理想。所以我用虚拟锚替换了它。

我的问题是我无法让副标题h1停止阻止标题h1。即使使用z-index。不知怎的，它阻止了第一个h1

理想情况下，两个h1中的文本都是可点击的，但我更喜欢标题是可点击的。

    <div class="title-box">
      <h1 class="content-title">
        <a href="#" class="content-title-link">FooFooFooFooFoo</a>
      </h1>
      <h1 class="content-subtitle"> Bar </h1>
    </div>

解决我的问题：https://jsfiddle.net/nL5pn4w2/4/

Answer 1

z-index仅适用于定位元素position:absolute，position:relative或position:fixed

另一种选择是让非链接h1忽略指针事件pointer-events: none;

jsfiddle