将链接嵌套在 div 中，其中 div 被链接包围

Question

下午好，

我正在重建一些网页（仅使用 html/css/jquery/js），其中一个网页上有一系列产品。每个都包含在自己的 div 中，并在页面上重复多次。这些产品都有一张图片、一些文字和一个链接。

我正在尝试更改产品幻灯片，以便整个元素都可以点击。通常没什么大不了的，因为我可以将吸盘包装在标签中并完成它。

但是，产品幻灯片上有一个链接。并且使用的 CSS 主题基于类名和元素类型进行选择，所以如果我更改任何一个样式，样式都会简单地脱落。

我在 codepen 中构建了一个粗略的结构示例： http://codepen.io/joshmonks/pen/EyByEr

<a class="product-link">
    <div id="product">
        <div><img></img></div>
        <div id="description">text text text</div>
        <a class="inner-link">buy now!</a>
    </div>
</a>

我想知道处理这种情况的最佳方法，我已经看到了一些关于使用 JQuery 侦听要单击的#product div 并在内部链接上触发单击事件的解决方案。如果没有找到其他解决方案，我相信我将使用此解决方案。如果可能的话，如果可能的话，我想要一个结构性的解决方案，而不是触发事件，因为结构就像示例中的那样感觉更优雅，但具有有效的 html

如果我可以嵌套标签，我就不能在内部链接上放置一个 href 并应用所有样式。然后在外部链接上有 href，但没有应用样式。当然，这是无效的 html :(

感谢您的帮助和建议！

Answer 1

如果您不介意在您的元素中没有可选择的内容，您可以制作一个覆盖在内容之上的内容，该内容本身就是一个锚点。将父级定位为position: relative;，将子级<a> 覆盖为position: absolute; top:0; bottom: 0; left: 0; right: 0;。

只需确保叠加层是.inner-link 锚的兄弟，而不是父级，并且它位于它之前。

Answer 2

您不能在链接中包含链接，但您可以使用 javascript 制作可点击的 div 来包装链接，请参见小提琴示例 https://jsfiddle.net/neya0v76/3/

<div id="container">
  <div class="product-link" onclick="goToLink()">
    <div id="product">
      <div>
        <img src="http://www.esri.com/news/arcuser/0610/graphics/nospin_1-lg.jpg" />
      </div>
      <div id="description">
        Text Text Text
      </div>
      <a class="inner-link" href="#">buy now!</a>

    </div>
  </div>
</div>
<script>
  function goToLink() {
    window.location.href = 'www.google.com';
  }
</script>