作品墙、案例列表常见这种交互平时只看图鼠标移上去半透明黑层带着标题和「快速预览」从上往下盖住图片移开又收回去。本例用 jQuery 的 animate 改 top时长 500 毫秒。图片卡片和遮罩层如何对应每一项是一个 li底层一张图上层一块 .bt_tu 遮罩。li 设 position: relative、overflow: hidden遮罩绝对定位后才不会漏出卡片外。本例两列宽约 22%高度 315。图用绝对定位铺满卡片。换项目时改 src、标题文字和按钮链接。jQuery 写在 hoverMask.js 前面否则 $ 未定义。遮罩层初始位置如何设在上方遮罩宽高跟卡片一致width/height: 100%背景 rgba(0,0,0,0.8)。关键是默认 top: -100%整块先停在卡片正上方再靠父级 overflow: hidden 裁掉所以平时看不见。我第一次看也卡了一下只写 top: -100% 却忘了父级 overflow: hidden遮罩会露在卡片上面动画还没开始就看得见一块黑。鼠标移入移出时自上而下的动画怎么写移入把 top 从 -100% 收到 0遮罩刚好盖满卡片移出再回到 -100%。用 animate并在前面加 stop()避免鼠标快速划过时动画排队、遮罩来回抖。500 是毫秒想更快改成 300更慢改成 800。事件挂在 body 上委托列表是接口渲染出来的也能用。只动画当前 li 里的 .bt_tu不会带动旁边卡片。遮罩里的标题和按钮样式怎么写标题在 .bt_tus p居中、加粗、金色 #d1b883过长用省略号。按钮 .btn 用 padding: 10px 28px 撑开不要写死宽高圆角做成胶囊形可点加手型。上边距用百分比随卡片高度大致居中。颜色、圆角、字号按设计改。按钮 href 换成预览页或详情地址。用在作品或案例列表时如何套用把 css/hoverMask.css、js/hoverMask.js 和图片拷进项目列表项按上面的 li 结构循环输出。多列改宽度和间距卡片高度跟图比例对一下遮罩是 height: 100%一般不用再写死 314。动画时长、遮罩透明度、按钮文案按栏目调整。这坑我见过不止一次卡片高度和图片比例差太多标题会偏上或偏下这时改 .bt_tus 的 padding-top比改动画参数更有效。