hover遮罩层正常显示需父容器设position: relative以建立定位上下文，遮罩层用position: absolute+top/left/right/bottom撑满并配opacity过渡；触摸设备需:focus-within或JS加类兼容。
hover伪类触发遮罩层显示的必要条件
必须确保父容器是相对定位（position: relative），否则遮罩层（绝对定位元素）会脱离预期位置，飘到页面顶部或body边缘。遮罩层本身要用position: absolute并配合top/left/right/bottom撑满父容器，同时设z-index高于图片但低于可能存在的其他交互层。
常见错误现象：hover时文字一闪而过、位置偏移、完全不出现——八成是定位上下文没建好。
- 图片用
<img>标签时，它默认是行内元素，需加display: block避免底部留白 - 遮罩层内容（如文字）建议用
display: flex居中，避免用margin: auto失效 - 过渡动画要写在遮罩层上，而不是
:hover规则里，否则首次悬停无缓动
opacity和visibility在hover遮罩中的实际区别
opacity: 0和visibility: hidden都能“隐藏”，但行为完全不同：opacity保留占位、响应事件；visibility也保留占位但默认不响应鼠标事件（除非加pointer-events: auto）。做文字描述遮罩时，推荐用opacity + transition，更可控。
性能影响：纯opacity变化是合成层操作，GPU加速，流畅；visibility切换不触发布局重排，但无法做淡入淡出动画。
立即学习“前端免费学习笔记（深入）”；
- 用
opacity: 0 → opacity: 1，搭配transition: opacity 0.3s ease - 别写
transition: all 0.3s——会意外带动transform或color等无关属性 - 如果遮罩含按钮或链接，确保
opacity: 0时仍可点击（默认可以），不需要额外处理
图片+文字遮罩的最小可行CSS结构
不需要JS，纯CSS就能完成。关键在于结构扁平、样式职责清晰：图片负责展示，遮罩层负责文案与动效，父容器只管定位流。
.card {
position: relative;
display: inline-block;
}
.card img {
display: block;
vertical-align: bottom;
}
.card .overlay {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.6);
color: white;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.card:hover .overlay {
opacity: 1;
}
使用场景：卡片式图集、作品集缩略图、商品列表项。注意cubic-bezier(0.4, 0, 0.2, 1)比ease更自然，移动端也跟手。
移动端hover失效与触摸设备兼容处理
真·触摸设备（iOS Safari、Android Chrome）不会触发:hover伪类，除非用户点过一次屏幕——这是浏览器策略，不是bug。单纯依赖:hover会导致遮罩在iPad上第一次点不显示，第二次才出现。
容易被忽略的地方：很多开发者以为加@media (hover: hover)就能解决，其实它只判断“设备是否支持hover”，不等于“当前处于悬停态”。真正稳妥的做法是补一层:focus-within或监听touchstart加临时class。
- 简单方案：给
.card加tabindex="0"，再写.card:focus-within .overlay { opacity: 1; } - 更彻底方案：用JS在
touchstart时给父元素加is-touched类，CSS里写.card.is-touched .overlay, .card:hover .overlay - 别用
@media (hover: none)直接禁用hover效果——桌面端外接鼠标时会彻底失效
复杂点在于，同一套组件既要适配鼠标悬停，又要服务触摸反馈，不能只靠CSS伪类兜底。
