Dev.to网站的文章卡片如何实现整卡为链接且不拦截内部独立链接？

实现原理 #

这种卡片交互完全可以通过纯CSS实现，不需要JavaScript控制跳转，核心依赖的是层叠顺序控制逻辑：

• 首先给卡片根元素<article>设置position: relative，作为内部绝对定位元素的定位参照
• 铺满全卡的<a>标签设置position: absolute撑满整个卡片，不额外设置z-index，或者主动设置z-index: 0
• 包裹实际内容的<div id="actual-content">设置position: relative和z-index: 1，让整个内容区域层级高于底层的全卡链接
• 内容区域内部的链接自然处于更高层级，点击时会优先触发上层链接的跳转行为，只有点击内容区域的空白透明位置时，才会触发底层全卡链接的跳转

还有一种补充实现方式是配合pointer-events属性：

• 给全卡链接设置pointer-events: none，让它完全不响应任何鼠标交互事件
• 再给内部需要单独响应的独立链接设置pointer-events: auto，单独恢复它的交互能力，也可以实现同样的效果

对应的示例CSS代码如下：

article {
  position: relative;
  width: 300px;
  padding: 16px;
  border: 1px solid #eee;
}

#full-sized-link {
  position: absolute;
  inset: 0; /* 等价于 top/right/bottom/left 都设为0 */
  z-index: 0;
}

#actual-content {
  position: relative;
  z-index: 1;
}

#individual-link {
  /* 独立链接的自定义样式，点击优先级高于底层全卡链接 */
}

内容的提问来源于stack exchange，提问作者ansellMax