本文讲解如何让 <a> 标签内叠加在图片上的标题文字（如 <h4>）在悬停时不阻断图片的 :hover 效果，通过 pointer-events: none 让鼠标事件穿透文字层，使整个链接区域（含图片和文字）统一响应 hover 状态。
在构建图库卡片（gallery item）时，常需将标题文字绝对定位覆盖于图片之上，并实现“鼠标移入任意区域（图片或文字）均提升图片不透明度”的交互效果。但默认情况下，HTML 元素会捕获鼠标事件——当 <h4> 覆盖在 <img> 上方时，悬停文字会阻止其下方图片接收到 :hover 状态，导致透明度无法恢复。
根本原因：CSS 的 :hover 伪类仅作用于被直接悬停的元素及其后代。由于 <h4> 是 <a> 的子元素且具有更高 z-index，它会拦截鼠标事件，使 <img> 失去 hover 触发条件。
解决方案：为文字元素添加 pointer-events: none。该声明使元素完全不参与鼠标事件捕获，鼠标行为将“穿透”该层，直接作用于其下的 <img> 或 <a> 容器，从而正确触发 img:hover 样式。
以下是完整、可复用的实现代码：
.galleryItem {
position: relative;
height: 180px; /* 建议设定明确高度以保障布局稳定 */
border-radius: 10px;
overflow: hidden; /* 防止文字溢出圆角边界 */
}
.galleryItem img {
width: 100%;
height: 100%;
object-fit: cover; /* 替代 contain，更适配背景图语义 */
object-position: center;
filter: opacity(0.7);
transition: filter 0.3s ease;
display: block; /* 消除行内元素默认间隙 */
}
.galleryItem a {
display: block;
height: 100%;
text-decoration: none;
}
.galleryItem a:hover img {
filter: opacity(1); /* 推荐将 hover 绑定到 a:hover，更健壮 */
}
.galleryItem h4 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bf5f9e9;
font-size: 1.3em;
text-align: center;
text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
z-index: 10;
pointer-events: none; /* ✅ 关键：允许鼠标事件穿透 */
}<div class="galleryItem">
<a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">
<h4>The Combinator</h4>
<img src="https://picsum.photos/600/400" alt="Gallery item image">
</a>
</div>关键注意事项：
- ✅ 优先绑定 a:hover img 而非 img:hover：因 <img> 在 <h4> 下方，直接写 img:hover 易失效；而 a:hover 可确保整个链接区域触发，更可靠；
- ✅ pointer-events: none 仅影响鼠标交互，不影响视觉渲染，文字样式、阴影、层级均保持不变；
- ⚠️ 若后续需为文字添加点击行为（如跳转），则不可使用此方案——应改用 JavaScript 监听容器事件，或重构为 background-image + 伪元素布局；
- ? 补充建议：为 .galleryItem 添加 overflow: hidden 和 border-radius，确保圆角裁剪与图片缩放协同生效。
通过这一简洁而精准的 CSS 技巧，即可实现语义清晰、交互一致的图库悬停体验，兼顾可维护性与浏览器兼容性（支持所有现代浏览器及 IE11+）。
