将 link 嵌套在 div 中，其中 div 被 link 包围

Question

下午好，

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

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

但是，产品幻灯片上有一个 link。所使用的 CSS 主题基于 class 名称和元素类型进行选择，因此如果我更改其中任何一个，样式将简单地脱落。

我在代码笔中构建了一个粗略的结构示例： 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 并触发点击的解决方案事件放在link里面。如果找不到其他解决方案，我相信我会使用此解决方案。如果可能的话，我想要一个结构化的解决方案，而不是在可能的情况下触发事件，因为结构看起来更优雅，就像示例中的那样，但有效 html

如果我可以嵌套标签，我可以简单地不在内部 link 上放置 href，并应用所有样式。然后将 href 放在外部 link，但不应用任何样式。当然，这是无效的html :(

感谢您的帮助和建议！

Answer 1

你不能在 link 中包含 link，但你可以用 javascript 制作一个可点击的 div 来包裹 link，参见 fiddle 示例 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>

Answer 2

如果您不介意元素内的内容不可选，您可以制作一个叠加层，使其位于本身就是锚点的内容之上。将父项定位为 position: relative;，将子项 <a> 叠加为 position: absolute; top:0; bottom: 0; left: 0; right: 0;.

只需确保叠加层是您的 .inner-link 锚点的同级元素，而不是父元素，并且它位于它之前。

将 link 嵌套在 div 中，其中 div 被 link 包围

nesting a link in a div, where that div is surrunded by a link

html

css

anchor

jquery

nested