将div嵌套在<a> doesn&#39;t make the whole div a link

Question

It only redirects to the url when I click on either the image or the text. But not the whole <div>. Any idea? Here's my code:

<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块级元素，您可以通过在display:block

中设置a来实现

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;