直接用 hover: 类在商品卡片上失效，是因为 hover 默认只作用于当前元素，需将 hover 放在外层容器并配合 group/group-hover、overflow-hidden、transform-gpu 和明确 transition 属性才能实现平滑、同步、兼容的悬停效果。
为什么直接用 hover: 类在商品卡片上会失效？
因为电商卡片通常包含图片、标题、价格、按钮等多个层级，而 hover: 默认只作用于当前元素自身。如果你只给按钮加 hover:bg-blue-600，图片或标题不会动；但用户想要的是「整个卡片悬停时，内部元素统一响应」——这需要把 hover: 放在最外层容器上，并确保子元素能正确继承或响应状态变化。
常见错误是：在 div 上加 hover:shadow-lg，但卡片内图片用了 object-fit: cover 且父容器没设 overflow-hidden，结果悬停时阴影出来了，图片却溢出边框。
- 必须给最外层卡片容器加
group（用于后续group-hover:）或直接用hover:配合子选择器 - 图片容器要加
overflow-hidden rounded-lg，否则悬停放缩时边缘撕裂 - 避免对
absolute定位的子元素（如“新品标”）直接用hover:，它不响应父级 hover，得用group-hover:
如何让图片在 Hover 时平滑缩放且不模糊？
Tailwind 默认的 hover:scale-105 会触发浏览器重绘，如果图片没指定宽高或没启用硬件加速，容易卡顿或出现锯齿。关键不是加缩放，而是控制变换上下文和渲染质量。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给图片外层容器加
relative overflow-hidden rounded-lg，图片本身加transition-transform duration-300 ease-in-out - 缩放用
group-hover:scale-105（配合外层group），而不是hover:scale-105直接写在图片上——否则鼠标移入图片空白处不会触发 - 强制开启 GPU 加速：
will-change-transform或更稳妥的transform-gpu（Tailwind v3.3+ 内置） - 图片标签必须带
width和height属性（或通过aspect-[4/3]控制比例），否则缩放时会回流重排
示例结构：
<div class="group relative overflow-hidden rounded-lg"> <img src="/shoe.jpg" alt="Sneaker" class="w-full h-48 object-cover transition-transform duration-300 ease-in-out transform-gpu group-hover:scale-105" /> </div>
Hover 时按钮上浮 + 背景渐变，怎么写才不卡顿？
电商卡片里「加入购物车」按钮常需要悬停上浮（translate-y）+ 背景色加深 + 文字微亮，但多个 hover: 叠加容易导致样式抖动或过渡不同步。
核心原则：所有动画属性必须归到同一 transition 声明中，且只用可硬件加速的属性（transform、opacity），避开 margin、background-color 等触发布局或重绘的属性。
- 用
transition-all duration-300 ease-out不推荐——它会过渡所有可变属性，包括未声明的，反而慢；应明确写transition-transform,transition-opacity,transition-color - 上浮用
group-hover:-translate-y-1（不是hover:-translate-y-1），确保和卡片 hover 同步 - 背景渐变别用
hover:bg-gradient-to-r—— Tailwind 的渐变类不支持 hover 动态切换，改用group-hover:bg-blue-600+before:content-[''] before:absolute before:inset-0 before:bg-gradient-to-r before:from-blue-500 before:to-indigo-600 before:opacity-0 group-hover:before:opacity-100 - 文字颜色变化优先用
group-hover:text-white，别依赖hover:text-white单独作用在按钮上
移动端要不要关掉 Hover 效果？
要，但不是简单加 md:hover:xxx。iOS Safari 和部分安卓 WebView 对 :hover 支持异常：点击后会残留 hover 状态，或者首次触摸不触发，第二次才生效。
更稳妥的做法是用媒体查询 + prefers-reduced-motion 双重控制：
- 默认关闭 hover 动画：
motion-safe:hover:xxx（Tailwind 默认启用prefers-reduced-motion: reduce的设备会跳过） - 针对触摸设备主动禁用：
not-touch:hover:xxx（需在tailwind.config.js中启用darkMode: 'class'并手动添加not-touch变体，或改用@layer utilities注入） - 最简方案：所有 hover 类都加上
md:hover:xxx，并确保移动端点击区域足够大（至少 44×44px），避免误触
真正麻烦的不是写法，而是测试——务必在真机 Safari、Chrome Android、微信内置浏览器里分别点一次、快速连点两次、长按，看 hover 状态是否残留或错乱。
