html - 链接 <div>

Question

我正在尝试链接一个元素。我希望它几乎像一个按钮，所有内容都链接在一起，并具有我在 CSS 中制作的悬停效果。目前看起来还不错，除了它不可点击或链接:)

有什么建议吗？

您可以在这里查看我的网站 http://sutterud2.eksaktlidenskap.no (向下滚动一点可以看到里面有文本和图像的灰色框)

这是我的 html:

<a href="http://some-url.com"><div class="one-half first greybox">
<img src="http://sutterud2.eksaktlidenskap.no/wp-content/uploads/2014/11/dummy-produktbilde.jpg"> </div></a>

这是我的 CSS:

.greybox {
    background-color: #f5f5f5;
    border: 4px solid #f5f5f5;
    margin-bottom:20px;
    display: block;
    padding: 25px;
}

.greybox:hover {
    border: 4px solid #ecebeb;
    margin-bottom:20px;
    background-color: #ecebeb;
}

Answer 1

你的代码很完美，你只是忘了添加你<a>您周围的元素<div>在网站上。

当前:

<div class="one-half first greybox">
  <h2>Armbåndsur</h2>
  <p>
    <img src="http://sutterud2.eksaktlidenskap.no/wp-content/uploads/2014/11/dummy-produktbilde.jpg">
    <br />
    Qhjkjh kjh kjh kjh kjh kjh khøhjlkjh jfgdfghdhgfd hgfdhgfd hgfdhgfd hgfd hgfd ghfd hgfd hgfdhfdhgfd hgfd hgfd hgfd ghfd g
</div>

• 非关闭 <p>
• 失踪<a>使您的 div 可点击

应该是:

<a href="...">
  <div class="one-half first greybox">
    <h2>Armbåndsur</h2>
    <p>
      <img src="http://sutterud2.eksaktlidenskap.no/wp-content/uploads/2014/11/dummy-produktbilde.jpg">
      <br />
      Qhjkjh kjh kjh kjh kjh kjh khøhjlkjh jfgdfghdhgfd hgfdhgfd hgfdhgfd hgfd hgfd ghfd hgfd hgfdhfdhgfd hgfd hgfd hgfd ghfd g
    </p>
  </div>
</a>

或者更好:

<a href="..." class="one-half first greybox">
  <h2>Armbåndsur</h2>
  <p>
    <img src="http://sutterud2.eksaktlidenskap.no/wp-content/uploads/2014/11/dummy-produktbilde.jpg">
    <br />
    Qhjkjh kjh kjh kjh kjh kjh khøhjlkjh jfgdfghdhgfd hgfdhgfd hgfdhgfd hgfd hgfd ghfd hgfd hgfdhfdhgfd hgfd hgfd hgfd ghfd g
  </p>
</a>

为什么在不需要时使用额外的 div？