本文详解如何在 Tailwind CSS 中实现「小屏幕用 focus、大屏幕用 hover」的响应式交互效果，重点解决 figure/figcaption 等非可聚焦元素无法触发 focus 类的问题，并提供可访问、跨设备兼容的完整解决方案。
本文详解如何在 tailwind css 中实现「小屏幕用 focus、大屏幕用 hover」的响应式交互效果，重点解决 `figure`/`figcaption` 等非可聚焦元素无法触发 `focus` 类的问题，并提供可访问、跨设备兼容的完整解决方案。
在构建响应式卡片组件时，我们常希望：移动端通过点击（触发 focus）展开内容，桌面端则通过悬停（hover）实现相同效果。这种设计兼顾了触屏设备无 hover 的特性，也符合无障碍访问原则。但如示例代码所示，直接对 <figure></figure> 或 <figcaption></figcaption> 使用 focus: 或 group-focus: 并不会生效——因为这些 HTML 元素默认不可聚焦（non-focusable），浏览器不会为其触发 focus 伪类，即使添加了 tabindex 缺失的 group 上下文也无法激活。
✅ 正确做法：显式声明 tabindex 并合理使用 group
要使任意元素（如 figure）支持 focus 及 group-focus，必须为其添加 tabindex 属性。推荐使用 tabindex="0"，它将元素纳入自然 Tab 顺序，既支持键盘导航，又可通过鼠标点击获得焦点，且语义清晰、无障碍友好。
以下是修正后的完整代码示例：
<div class="max-w-sm bg-white border border-gray-200 rounded-lg">
<figure class="relative w-full transform transition duration-300
focus:scale-105 lg:hover:scale-105 overflow-hidden
group" tabindex="0"><!-- ✅ 关键：使 figure 可聚焦 --><!-- 图片占位（建议用 img 标签并添加 alt） -->
@@##@@
<figcaption class="absolute inset-x-0 bottom-0 px-6 py-2 pt-6 rounded-b-lg text-white
transform translate-y-36 transition duration-300
group-focus:translate-y-0 lg:group-hover:translate-y-0"><h3 class="font-bold text-lg">卡片标题</h3>
<p class="text-sm opacity-90">这里是描述性文字...</p>
</figcaption></figure>
</div>
? 关键要点说明
-
tabindex="0"是必需项：没有它，<figure></figure>永远不会获得焦点，focus:和group-focus:类均无效； -
group依赖父级可聚焦性：group-focus:作用于子元素的前提是其直接父容器（即figure）本身可聚焦且已获得焦点； -
响应式断点逻辑准确：
lg:hover:仅在 ≥1024px 时启用 hover；小屏幕下用户点击卡片 →figure获得焦点 → 触发group-focus:translate-y-0，平滑上移图注； -
无障碍增强：添加
tabindex="0"后，键盘用户可按Tab键聚焦卡片，按Enter或Space也能触发焦点（若需进一步交互，可配合keydown处理）； -
避免
tabindex="-1"的陷阱：它虽可编程聚焦（如element.focus()），但不参与 Tab 顺序，对普通用户点击无效，不推荐用于此场景。
⚠️ 注意事项与最佳实践
-
语义化补充：若卡片承载重要操作（如跳转），建议用
<a></a>或<button></button>替代<figure></figure>，天然可聚焦且语义明确； -
触摸设备优化：iOS Safari 对非表单元素的
focus支持较弱，确保在:focus后添加:focus-visible回退样式，或统一使用:active作为触摸反馈补充； -
CSS 降级保障：为防 JS 禁用或 Tailwind 构建异常，可在 CSS 中添加兜底过渡：
.group:focus .group-focus\:translate-y-0, .group:hover .group-hover\:translate-y-0 { transform: translateY(0); } -
测试建议：在 Chrome DevTools 中切换设备模拟器（如 iPhone SE + “Toggle device toolbar”），手动点击卡片，检查
document.activeElement是否为figure，验证焦点流是否正常。
通过合理运用 tabindex 与 Tailwind 的响应式前缀，你不仅能精准控制跨设备交互行为，还能提升组件的可访问性与健壮性——这才是现代前端开发中“响应式交互”的真正内涵。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
