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