最直接解法是将整个容器设为标签并设display: block，确保图片和文字均属同一可点击区域，避免层级错乱、尺寸塌陷及移动端穿透问题。
把整个容器设为
很多人给 ，再在旁边或上面放文字层，结果只有图片区域能点——因为链接热区只覆盖了 position: absolute 的）又挡住了底层链接的鼠标事件。
正确做法是：把包含图片和文字的最外层容器（比如 如果结构不能改（比如 CMS 输出固定 HTML），就必须靠 CSS 层级补救。关键不是堆 常见错误是这样写： 问题在于： 当 生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力：
- 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面；
- 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”；
- 提及位于 `apps/console/src/featur 必须确保容器有明确渲染尺寸： iOS Safari 对 真正难的不是让文字浮起来，而是让浏览器明白：“这一整块，都是同一个链接”。所有样式调整，最终都要服务于这个判断——否则再漂亮的遮罩，点不进去就是废的。 标签，并设 display: block：<a href="/post/123" class="card">
@@##@@
<div class="overlay"><h3>标题</h3></div>
</a>
默认是 inline 元素，必须加 display: block 或 inline-block 才能撑满容器尺寸
pointer-events: none 去“透传”点击——那会破坏悬停动画触发逻辑，也容易在 iOS 上失灵
position: relative 容器 + z-index 分层要小心顺序z-index，而是确保点击目标始终在最上层且不透明。.card { position: relative; }
.card img { position: relative; z-index: 1; }
.card .overlay { position: absolute; top: 0; left: 0; z-index: 2; }
.overlay 虽然层级高，但它可能是空的（比如只含 ），而 自身没占满整个 .overlay 区域，导致部分区域“悬空”、无法触发 hover 或点击。
.overlay 内的文字元素（如 ）加 width: 100%; height: 100%，或更稳妥地用 display: flex 布局让它撑满.overlay 只做视觉遮罩，不要让它参与点击——删掉它的 z-index，改用 pointer-events: none，但前提是它的子元素（如 ）有独立 pointer-events: auto
z-index：它默认是 auto，加了反而可能被其他 relative 元素压住图片尺寸塌陷会导致点击区域“缩水”
的实际可点击区域就只剩文字高度那一丁点，图片下方大片空白点不动。
加 aspect-ratio: 16/9（现代浏览器）或 padding-top: 56.25%（兼容方案）强制宽高比width: 100%; height: 100%; object-fit: cover，否则它不会填满容器display: inline 行为：加 display: block，否则底部会有基线间隙，进一步压缩有效点击区移动端真机测试常暴露隐藏问题
:hover 支持极弱：首次点击才触发，之后才模拟 hover；而且如果 内部有 position: absolute 元素盖住图片，点击可能直接穿透到下层页面元素。
:hover 实现核心跳转逻辑——链接本身必须可点，悬停只是装饰 上加 touch-action: manipulation，减少 iOS 点击延迟
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
