本文讲解如何通过纯 css 实现图片悬停时显示叠加文字标题，并解决“仅文字区域可点击、图片区域无链接响应”的常见问题，关键在于合理布局与 z-index 控制。
本文讲解如何通过纯 css 实现图片悬停时显示叠加文字标题，并解决“仅文字区域可点击、图片区域无链接响应”的常见问题，关键在于合理布局与 z-index 控制。
在构建图文卡片（如博客缩略图、作品集网格）时，常需实现「默认隐藏标题，悬停图片时淡入文字层，且整个卡片区域均可跳转至同一链接」的效果。但原代码中存在两个核心问题：
- 链接失效：.entry-thumbnail（图片外层 ）被 .entry-header（绝对定位的文字容器）遮挡，导致鼠标无法触发其 :hover 或点击行为；
-
交互不一致：仅当光标落在
文字上才可点击，而悬停在图片空白处无响应。
✅ 正确解法：统一链接容器 + 层级优化
最简洁可靠的方案是将整个 .entry-wrapper 设为可点击区域，而非分别包裹图片和标题——即移除独立的 .entry-thumbnail 链接，改用 display: block 的 标签包裹全部内容，并通过 z-index 确保标题层可悬停显示，同时不阻断底层链接。
以下是优化后的结构与样式（兼容现代浏览器）：
<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
style="max-width:90%"
height="300"
src="https://images.unsplash.com/photo-1597589827317-4c6d6e0a90bd?ixlib=rb-4.0.3&auto=format&fit=crop&w=2080&q=80"
alt="Featured image"
decoding="async"
>
</div>
</a>
</article>/* 重置与基础尺寸 */
*,
*::before,
*::after {
box-sizing: border-box;
}
.entry-card {
display: block;
width: 300px;
height: 300px;
text-decoration: none;
}
.entry-wrapper {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.entry-wrapper img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.entry-wrapper:hover img {
transform: scale(1.03); /* 可选：增强悬停反馈 */
}
/* 悬停文字层 */
.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;
z-index: 10;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
transition: opacity 0.3s ease-in-out;
}
.entry-wrapper:hover .entry-header {
opacity: 1;
}
.entry-header .entry-meta span {
font-size: 0.85em;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 0.5rem;
}
.entry-header h2 {
font-size: 1.5rem;
font-weight: 700;
margin: 0;
}? 关键要点说明
- 单链接容器： 包裹整个卡片，语义清晰、无障碍友好，且天然支持全区域点击；
- z-index 分层逻辑：.entry-header（z:10）覆盖在图片之上用于展示文字，但不阻断底层 的事件冒泡——因为 是父元素，事件始终由它捕获；
-
避免冗余链接：移除了原结构中重复的 嵌套（如
），防止链接嵌套引发的 DOM 不稳定或 SEO 问题；
- 增强体验：添加了 transform: scale() 和 rgba() 背景，使悬停效果更专业；object-fit: cover 保证图片自适应不拉伸。
⚠️ 注意事项：切勿对 .entry-header 设置 pointer-events: none（会禁用文字内链），也无需额外设置 h2 { width:100%; height:100% }（这是旧方案的权宜之计，本质未解决问题根源）。真正可靠的方式是重构 DOM 结构，让语义与交互逻辑统一。
此方案兼顾可访问性（screen reader 可识别单一链接）、SEO（单一权威 URL）、维护性（CSS 逻辑清晰）与视觉表现力，是生产环境推荐的最佳实践。
