本文讲解如何通过纯 css 实现图片悬停时显示带链接的标题文字层，并解决因元素层级导致的图片区域无法触发链接的问题，关键在于确保可点击区域覆盖完整容器。
本文讲解如何通过纯 css 实现图片悬停时显示带链接的标题文字层，并解决因元素层级导致的图片区域无法触发链接的问题，关键在于确保可点击区域覆盖完整容器。
在构建响应式图文卡片（如博客摘要、作品集展示）时，常需实现“图片默认显示，悬停时浮现半透明遮罩+标题文字”的交互效果。但许多开发者会遇到一个典型问题：只有文字区域能点击跳转，而图片本体点击无效——这本质上是 HTML 结构与 CSS 层叠顺序（z-index）和点击热区（clickable area）不匹配所致。
问题根源分析
原始代码中，.entry-thumbnail（含 <img> 的 <a> 标签）位于 .entry-header（含标题的 <header>）下方，且未设置 position 或 z-index 控制层级。虽然 .entry-header 被设为 position: absolute 并置于顶层（z-index: 15），但其父容器 .entry-wrapper 是 relative 定位，而 <a class="entry-thumbnail"> 是普通流内元素，实际渲染层级低于绝对定位的 .entry-header。更关键的是：该 <a> 标签仅包裹 <img>，其尺寸由图片内容决定，未撑满整个 .entry-wrapper 容器，导致图片区域外的空白（如 padding、过渡区域）不可点击。
正确解决方案：统一可点击容器 + 层级优化
核心思路是：将整个 .entry-wrapper 设为可点击区域，而非仅依赖内部 <a> 标签。推荐采用语义化且健壮的结构：
<article>
<a href="https://www.google.com/" class="entry-card">
<div class="entry-wrapper">
<header class="entry-header">
<div class="entry-meta"><span>Text</span></div>
<h2>Headline</h2>
</header>
<img
width="300"
height="300"
src="https://images.unsplash.com/..."
alt="Featured image"
decoding="async"
>
<div class="entry-content entry-excerpt"></div>
</div>
</a>
</article>对应关键 CSS（精简优化版）：
.entry-card {
display: block;
width: 300px;
height: 300px;
position: relative;
overflow: hidden;
}
.entry-wrapper {
position: relative;
width: 100%;
height: 100%;
}
.entry-header {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 30px;
background-color: rgba(108, 131, 111, 0.85); /* 半透背景 */
color: white;
opacity: 0;
transition: opacity 0.3s ease-in-out;
z-index: 10;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
}
.entry-card:hover .entry-header {
opacity: 1;
}
/* 确保图片铺满容器，避免空白热区 */
.entry-wrapper img {
width: 100%;
height: 100%;
object-fit: cover; /* 保持比例填充 */
display: block;
}
/* 可选：提升图片层级（防极少数兼容问题） */
.entry-wrapper img {
z-index: 1;
position: relative;
}关键要点说明：
- ✅ 单个 <a> 包裹整个卡片：确保任意位置（图片、空白、文字层）点击均触发跳转，符合无障碍访问（a11y）原则；
- ✅ .entry-header 使用 opacity + transition 实现淡入效果，避免 visibility: hidden 导致的布局塌陷；
- ✅ object-fit: cover 保证图片自适应填充容器，防止拉伸或留白；
- ✅ 移除冗余的 :hover 伪类绑定到子元素（如 .entry-thumbnail:hover），全部交由父级 .entry-card:hover 统一控制，逻辑更清晰；
- ⚠️ 注意：若必须保留原结构（即 <a> 仅包裹 <img>），则需强制 .entry-thumbnail 占满容器并提升 z-index，但此方式语义性差且易受其他样式干扰，不推荐生产环境使用。
通过以上重构，既解决了链接失效问题，又提升了代码可维护性与可访问性，是现代前端开发中处理悬停卡片的标准实践。
