リンクの上に絶対配置された要素

Question

私は制御できないHTMLをいくつか持っていますが、特定の出力を実現するようにスタイルを設定できるかどうかを見ています。私には、リンクを持つ子供がいるリンクがあります。私はリンクの兄弟であるタイトルを持っていますが、リンクの途中には絶対に配置されています。リンクをクリックするとリンクをクリックできますが、見出し要素にカーソルを合わせるとリンクをクリックできません（<a>の子ではなく、兄弟です）。明らかにタイトルが<a>の子孫だったなら、私は問題ありません。

希望の出力を得るための選択肢はありますか？私が言ったように、私がスタイリングしているHTMLは編集できません。 HTMLとCSSを以下に示します。

最終的にはタイトルをリンクの上に配置したいが、タイトル全体にカーソルを置いてもいなくても、リンク全体をクリックすることができます。

<div id="" class="grid-square"> 
    <a href="# class="widget_sp_image-image-link"> 
     <img width="1920" height="1080" class="attachment-full" style="max-width: 100%;" src="..."> 
    </a> 
    <div class="title"> 
     <p>TITLE</p> 
    </div> 
</div> 


.home-grid .grid-square, .home-grid .grid-rectangle-half { 
    background-color: #000; 
    display: block; 
    font-size: 100%; 
    margin-bottom: 30px; 
    overflow: hidden; 
    position: relative; 
} 

.home-grid img { 
    height: 100%; 
    position: absolute; 
    width: 100%; 
} 

.home-grid .title { 
    color: #fff; 
    font-size: 4.8em; 
    font-weight: 600; 
    font-family: "proxima-nova-alt-condensed"; 
    left: 0; 
    margin-bottom: 0; 
    margin-top: 0; 
    position: absolute; 
    top: 50%; 
    text-align: center; 
    width: 100%; 
    z-index: 1; 
} 

Answer 1

あなたがマウスイベントがタイトルを通過し、下のリンクをターゲットにすることを示すために、タイトルクラスのnoneにプロパティpointer-eventsを設定することができます。
次のスニペットでは、ページを下にスクロールしてタイトルまたはイメージをクリックして、ドキュメントの先頭に戻ることができます。

p { 
 
    margin: 0 ; 
 
} 
 
.grid-square { 
 
    position: relative ; 
 
    width: 300px ; 
 
    height: 800px ; 
 
    line-height: 800px; 
 
} 
 
.home-grid img { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.home-grid .title { 
 
    position: absolute; 
 
    pointer-events: none; 
 
    color: #fff; 
 
    font-size: 4.8em; 
 
    font-weight: 600; 
 
    font-family: "proxima-nova-alt-condensed"; 
 
    width: 100%; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    z-index: 1; 
 
}

<div class="home-grid"> 
 
    <div class="grid-square"> 
 
     <a href="#top" class="widget_sp_image-image-link"> 
 
      <img class="attachment-full" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/550px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg"> 
 
     </a> 
 
     <div class="title"> 
 
      <p>TITLE</p> 
 
     </div> 
 
    </div> 
 
</div>