最简方案是给div.card设transform: scale(1.05)，但需加backface-visibility: hidden或translatez(0)防文字模糊；按钮应绝对定位+visibility:hidden/opacity:0+pointer-events:none；多卡片间hover闪烁可用负margin扩热区；移动端须用:active或js模拟hover，避免纯:hover依赖。
hover 时卡片整体缩放但文字不模糊
直接对 div.card 设置 transform: scale(1.05) 是最简方案，但部分浏览器（尤其是旧版 Safari 和某些 Chrome 版本）在非整数缩放时会触发亚像素渲染，导致文字发虚。关键不是“加 transition”，而是“避免缩放影响文本清晰度”。
实操建议：
- 给卡片容器设
backface-visibility: hidden或transform: translateZ(0)，强制 GPU 加速，减少重绘抖动 - 文字内容放在独立子元素里，并对其单独设置
transform: scale(0.952)（即 1/1.05），抵消父级缩放——但更稳妥的做法是：不缩放文字，只缩放边框、阴影和图片区域 - 过渡属性限定为
transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94)，避免all导致意外重排
图片层叠遮罩 + 悬停渐显按钮
常见错误是把按钮用 opacity: 0 + transition: opacity 控制，结果悬停瞬间按钮“闪一下”或位置跳动。根本原因是按钮默认参与文档流，透明后仍占位，且未设置 pointer-events: none。
正确做法：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 按钮用绝对定位覆盖在图片上，父容器设
position: relative - 按钮初始状态：
opacity: 0; visibility: hidden; pointer-events: none; - 悬停时只改
opacity: 1和pointer-events: auto，visibility不参与过渡（否则有延迟） - 若需淡入+上浮效果，可加
transform: translateY(-4px)，但注意别让按钮超出卡片边界
多卡片并排时 hover 互相干扰
当用 display: flex 或 inline-block 排列多个卡片，鼠标从一张移到另一张中间空隙时，:hover 状态会断开，造成“闪烁退出再进入”。这不是 CSS 缺陷，而是事件触发间隙的真实表现。
缓解方式：
- 给卡片容器（如
.card-grid）加gap: 12px，同时给每张卡片加margin: -6px，视觉间距不变，但悬停热区连通 - 更可靠的是 JS 辅助：监听容器
mouseenter，用节流控制状态切换；但纯 CSS 场景下，优先用padding扩展热区而非依赖margin - 避免在卡片内嵌套过多
position: absolute元素，它们可能截获鼠标事件，导致 hover 失效
移动端点击穿透与伪类兼容性
iOS Safari 对 :hover 支持极弱：只有带 href 的元素才响应，且首次点击才触发，第二次才真正 hover —— 这意味着纯 div 卡片在 iPhone 上几乎不触发过渡。
必须处理的点：
- 给卡片加
cursor: pointer并配合touch-action: manipulation，提升点击响应 - 对移动端，改用
:active做即时反馈（比如按下去缩小 0.98），再配合 JS 监听touchstart模拟 hover 状态 - 不要依赖
@media (hover: hover)做完全隔离，它在 iPadOS 上行为不一致；更稳的是用data-hover="true"配合 JS 切换 class
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
