悬停效果必须与栅格系统解耦，正确做法是将 hover 容器作为 .col-* 的直接子元素并设为 position: relative，图片用 img-fluid + object-fit: cover；禁用纯 :hover 于移动端，需加 touch-action 或改用 click 交互。
悬停效果必须和栅格系统解耦，别往.col里硬塞hover类
直接给 .col-* 加 ehover1 或自定义 hover 类，会导致响应式断点切换时动画错位、叠加层偏移甚至消失。因为 .col-* 是 flex 子项，其 width 和 padding 会随断点动态变化，而 hover 动画依赖固定尺寸容器定位。
正确做法是：悬停容器必须是 .col-* 的**直接子元素**，且自身设为相对定位、固定宽高或继承父宽高：
-
.col-md-4内套一层<div class="hover ehover1">，再放 <code><img>和<div class="overlay"> <li>该 <code>hover容器需加position: relative（Bootstrap 的effects.min.css已内置） - 图片务必加
img-fluid，否则在小屏下会溢出容器或拉伸变形 - 给 hover 容器显式加
will-change: transform（CSS 中写或用style="will-change: transform"） - 避免用
g-3+transform组合；改用gx-3 gy-3分离控制，减少重排影响 - 动画 duration 统一设为
0.3s，别用0.2s——太短易被浏览器丢帧 - 加
touch-action: manipulation到 hover 容器，提升触控响应优先级 - 对关键操作按钮（如“查看详情”）单独加
onclick=""空事件，强制 iOS 激活 :active 状态 - 真要全平台一致交互？放弃纯 CSS hover，改用
data-bs-toggle="modal"弹出详情，或监听click切换.show类 - 给图片父容器（即
.hover）设固定高宽，例如style="height: 200px;" - 图片加
style="object-fit: cover; width: 100%; height: 100%;"，而不是只靠img-fluid - 别信“我图都裁好了”，移动端 viewport 缩放会破坏原始比例，
object-fit是唯一兜底方案
响应式列数切换时，hover动画卡顿或闪退？检查gutter和transform兼容性
用 g-3 控制列间距时，transform: scale() 类动画（如缩放淡入）在 Safari 或旧版 Chrome 中可能因硬件加速未触发而掉帧。更隐蔽的问题是：当从 col-md-6 切到 col-lg-4，列宽突变导致 transition 重置，动画中断。
解决办法：
移动端点击悬停效果失效？别依赖:hover伪类
纯 CSS :hover 在 iOS 和 Android 触屏设备上默认只触发一次（模拟“悬停”），且不支持长按或二次交互。用户点一下就闪退，根本看不到 overlay 内容。
必须补救：
图片比例不一致导致网格错行？object-fit比width/height更可靠
网格中混用 4:3、16:9、正方形图片时，仅靠 img-fluid 会让高度不统一，悬停 overlay 垂直位置飘移，尤其在 col-xl-3 四列布局下明显。
必须做两件事：
悬停动画的复杂点不在动效本身，而在它和响应式栅格的耦合关系——列宽变、容器尺寸变、transform 基准就变。最容易被忽略的是触屏设备上 :hover 的单次触发限制，这点连很多上线项目都还在裸奔。
