h1 блокирование других h1 с якорем в нем

Question

У меня есть два элемента h1, один из них является субтитрами и расположен за первым, используя z-index. Я хочу нажать на первый 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>

Fiddle с моей проблемой: https://jsfiddle.net/nL5pn4w2/4/

Answer 1

г-индекс работает только на элементы расположены position:absolute, position:relative, или position:fixed

Другим вариантом было бы иметь не- link h1 игнорировать события указателя pointer-events: none;

jsfiddle