链接<div> </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？