h1阻塞带有锚的其他h1

Question

我有两个h1元素，一个是字幕，放在第一个使用z索引的后面。我想点击一下第一个h1。这个点击需要转到jQuery，因为我将使用它来停止播放视频和其他事情。我过去常常点击第一个h1本身，但是由于它是块元素，这并不理想，因为它被扩展到整个页面宽度。所以我用一个假锚代替了它。

我的问题是我不能让字幕h1停止阻止标题h1。即使使用z索引。不知怎么的，它一直阻塞着第一个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-索引仅适用于定位元素position:absolute、position:relative或position:fixed。

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

小提琴