本文介绍一种轻量、高效且语义清晰的纯 CSS 方案，通过 :hover 和 :focus 配合 tabindex，实现图片上叠加文字的隐藏/显示交互，彻底摆脱冗余 jQuery 代码，同时确保初始隐藏、可访问性及响应式兼容。
本文介绍一种轻量、高效且语义清晰的纯 css 方案，通过 `:hover` 和 `:focus` 配合 `tabindex`，实现图片上叠加文字的隐藏/显示交互，彻底摆脱冗余 jquery 代码，同时确保初始隐藏、可访问性及响应式兼容。
在实际开发中，为图片添加可交互的文字说明（如商品信息、标题描述等）是常见需求。许多初学者会本能地选择 jQuery 的 .fadeIn() / .fadeOut() 实现点击切换，但这种方式存在明显缺陷：代码重复、初始状态难控（如 visibility: hidden 导致动画失效）、可访问性差，且增加不必要的 JS 依赖。
推荐方案：纯 CSS 驱动，兼顾体验与健壮性
我们采用现代 CSS 的伪类机制，提供两种主流交互模式——悬停显示（:hover） 与 聚焦显示（:focus），二者均天然支持“初始隐藏”，无需 JavaScript 干预。
✅ 核心原理说明
- 文字容器（.textoSaquito）默认设置 opacity: 0 + scale: 0.8 + transition，实现淡入缩放动画；
- 父容器（.productoSaquitos）添加 tabindex="0"，使其成为可聚焦元素（保障键盘用户可通过 Tab 键操作）；
- 利用 CSS 层级关系：.productoSaquitos:hover .textoSaquito 或 .productoSaquitos:focus .textoSaquito 触发状态变更。
? 推荐 HTML 结构（精简语义化）
<div class="contenedorSaquito">
<div class="productoSaquitos" tabindex="0">
<img class="imagenSaquitos" src="imagenes/delhi-tea/saquitos/D-T-SAQ-AGUA.jpg" alt="Ifusiones Arandano Azul">
<div class="textoSaquito">
<h2>Ifusiones Arandano Azul</h2>
<h3>Patagonia Finest Tea</h3>
<p>Presentacion: 20 Saquitos</p>
<p>Ingrediente: Arandano y Cascara Naranja</p>
</div>
</div>
<!-- 其余4个同理，结构完全复用 -->
<div class="productoSaquitos" tabindex="0">...</div>
<div class="productoSaquitos" tabindex="0">...</div>
<div class="productoSaquitos" tabindex="0">...</div>
<div class="productoSaquitos" tabindex="0">...</div>
</div>? 提示：移除了冗余 ID（如 #lata1）、嵌套 div.imagenSaquitos 容器，直接让 <img> 作为子元素，提升语义性与渲染效率；alt 属性补全，增强无障碍支持。
立即学习“前端免费学习笔记（深入）”；
? 关键 CSS（支持悬停 & 键盘聚焦双模式）
.productoSaquitos {
position: relative;
cursor: pointer;
width: 20%; /* 桌面端 */
}
.imagenSaquitos {
width: 100%;
height: auto;
display: block;
object-fit: cover;
}
.textoSaquito {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.82);
color: white;
padding: 1.5rem 1rem;
text-align: center;
opacity: 0;
scale: 0.9;
transition: opacity 0.4s ease, scale 0.4s ease;
z-index: 2;
}
/* 悬停显示（鼠标用户）*/
.productoSaquitos:hover .textoSaquito,
/* 聚焦显示（键盘/屏幕阅读器用户）*/
.productoSaquitos:focus .textoSaquito {
opacity: 1;
scale: 1;
}
/* 响应式适配 */
@media (max-width: 1200px) {
.productoSaquitos {
width: 70%;
margin: 0.5rem;
}
.textoSaquito {
padding: 1.2rem 0.8rem;
}
}⚠️ 注意事项与最佳实践
- 不要使用 display: none 初始隐藏：会导致 transition 失效，opacity: 0 是动画友好的隐藏方式；
- 务必添加 tabindex="0"：否则 :focus 不生效，损害可访问性（WCAG 2.1 AA 合规要求）；
- 慎用 visibility: hidden：它虽保留布局空间，但无法触发 CSS 过渡动画；
- 移动端兼容性：iOS Safari 对 :hover 支持有限（需点击两次），因此 :focus 模式更可靠；若仅需悬停，可配合 @media (hover: hover) 媒体查询做条件启用；
- 性能提示：避免对 top/left 等触发重排的属性做动画，opacity 和 transform（如 scale）由 GPU 加速，性能更优。
✅ 总结
用纯 CSS 替代 jQuery 实现图片文字显隐，不仅代码量减少 90%+，更带来三大优势：
? 零 JS 依赖：加载更快、无执行阻塞；
? 开箱即用可访问性：天然支持键盘导航与屏幕阅读器；
? 维护成本极低：样式统一管理，新增图片只需复制 HTML 结构，无需修改 JS。
从此告别为每个元素写独立事件监听器的时代——让 CSS 回归它本该擅长的领域：声明式、高效、优雅的视觉交互。
