jquery - 在 div 中嵌套一个链接，该 div 被一个链接包围

Question

下午好

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

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

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

我在代码笔中构建了一个粗略的结构示例: 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

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

只需确保叠加层是您的 .inner-link 的同级，而不是父级anchor 并且它出现在它之前。