<a>の入れ子divは、div全体をリンクにしません

Question

画像またはテキストのいずれかをクリックすると、URLにリダイレクトされます。しかし、全体は<div>ではありません。何か案が？ここに私のコードだ：

<a href="someurl"> 
 
    <div class="story"> 
 
    <img src="photo.jpg"> 
 
    <div class="storyText"> 
 
     <h1>title</h1> 
 
     <ul> 
 
     <li>list</li> 
 
     <li>list</li> 
 
     <li>list</li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</a>

Answer 1

あなたはaブロックレベル要素を作成する必要があり、あなたはこのdoesnのはa

a { 
 
    border: solid red; /* demo */ 
 
    display: block 
 
} 
 
a:hover { 
 
    background: rgba(0,0,0,.5) /* demo */ 
 
}

<a href="someurl"> 
 
    <div class="story"> 
 
    <img src="//placehold.it/100"> 
 
    <div class="storyText"> 
 
     <h1>title</h1> 
 
     <ul> 
 
     <li>list</li> 
 
     <li>list</li> 
 
     <li>list</li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</a>