h1 blockiert andere h1 mit Anker darin

Ich habe zwei h1 Elemente, eines ist ein Untertitel und wird hinter dem ersten mit Z-Index platziert. Ich möchte einen Klick auf die erste h1 haben. Dieser Klick muss zu jQuery gehen, weil ich damit unter anderem die Wiedergabe eines Videos anhalten werde. Ich hatte einen Klick auf die erste h1 selbst, aber da es ein Blockelement war, war dies nicht ideal, da es über die gesamte Seitenbreite gestreckt wurde. Also habe ich das durch einen Dummy-Anker ersetzt.h1 blockiert andere h1 mit Anker darin

Mein Problem ist, dass ich den Untertitel h1 nicht erhalten kann, um den Titel h1 zu blockieren. Auch bei Verwendung von Z-Index. Irgendwie blockiert es die erste h1

Idealerweise ist der Text in beiden H1 anklickbar, aber ich bevorzuge den Titel anklickbar sein.

<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 mit meinem Problem: https://jsfiddle.net/nL5pn4w2/4/

Quelle

2016-11-23 Sitethief

Z-Index funktionierte nur mit der Position, so muß Position relativ dieses Elements –

nicht in einer Million Jahre hinzuzufügen, ich will ein Element von einer anderen abgedeckt klicken, um ein Video zu spielen – madalinivascu

Sein des Titelelement für zu stoppen eine Kursseite mit einem Videoplayer mit kurzen Lernvideos. Durch Klicken auf das Titelelement sollte die Seite zurückgesetzt werden, um das Intro-Bild anzuzeigen und die Wiedergabe zu stoppen. Nichts ruchloses darüber imho. – Sitethief

z-index funktioniert nur auf positionierte Elemente position:absolute, position:relative oder position:fixed

Eine andere Möglichkeit wäre, die nicht haben Link h1 ignoriere Zeigerereignisse pointer-events: none;

jsfiddle

Quelle

2016-11-23 09:15:26 hairmot

Nur aus Neugier, funktioniert 'Zeiger-Ereignisse' für Berührungen? –

Wenn "Zeiger-Ereignisse" auch mit Touch-Geräten funktionieren, wäre es sogar besser. Aber das ist schon eine gute Lösung für mein Problem. – Sitethief

Verwenden Sie die Touch-Aktion: auto; https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action – hairmot

h1 blockiert andere h1 mit Anker darin

Antwort

Verwandte Themen