hover遮罩层正常显示需父容器设position: relative以建立定位上下文，遮罩层用position: absolute+top/left/right/bottom撑满并配opacity过渡；触摸设备需:focus-within或JS加类兼容。
hover伪类触发遮罩层显示的必要条件
必须确保父容器是相对定位（
），否则遮罩层（绝对定位元素）会脱离预期位置，飘到页面顶部或body边缘。遮罩层本身要用
并配合
撑满父容器，同时设
高于图片但低于可能存在的其他交互层。
常见错误现象：
时文字一闪而过、位置偏移、完全不出现——八成是定位上下文没建好。
图片用
标签时，它默认是行内元素，需加
避免底部留白
遮罩层内容（如文字）建议用
居中，避免用
失效
过渡动画要写在遮罩层上，而不是
规则里，否则首次悬停无缓动
opacity和visibility在hover遮罩中的实际区别
和
都能“隐藏”，但行为完全不同：
保留占位、响应事件；
也保留占位但默认不响应鼠标事件（除非加
）。做文字描述遮罩时，推荐用
+
，更可控。
性能影响：纯
变化是合成层操作，GPU加速，流畅；
切换不触发布局重排，但无法做淡入淡出动画。
立即学习
“
前端免费学习笔记（深入）
”；
用
，搭配
别写
——会意外带动
或
等无关属性
如果遮罩含按钮或链接，确保
时仍可点击（默认可以），不需要额外处理
图片+文字遮罩的最小可行CSS结构
不需要JS，纯CSS就能完成。关键在于结构扁平、样式职责清晰：图片负责展示，遮罩层负责文案与动效，父容器只管定位流。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
使用场景：卡片式图集、作品集缩略图、商品列表项。注意
比
更自然，移动端也跟手。
移动端hover失效与触摸设备兼容处理
真·触摸设备（iOS Safari、Android Chrome）不会触发
伪类，除非用户点过一次屏幕——这是浏览器策略，不是bug。单纯依赖
会导致遮罩在iPad上第一次点不显示，第二次才出现。
容易被忽略的地方：很多开发者以为加
就能解决，其实它只判断“设备是否支持hover”，不等于“当前处于悬停态”。真正稳妥的做法是补一层
或监听
加临时class。
简单方案：给
加
，再写
更彻底方案：用JS在
时给父元素加
类，CSS里写
别用
直接禁用hover效果——桌面端外接鼠标时会彻底失效
复杂点在于，同一套组件既要适配鼠标悬停，又要服务触摸反馈，不能只靠CSS伪类兜底。
position: relativeposition: absolutetop/left/right/bottomz-indexhoverdisplay: blockdisplay: flexmargin: auto:hoveropacity: 0visibility: hiddenopacityvisibilitypointer-events: autoopacitytransitionopacityvisibilityopacity: 0 → opacity: 1transition: opacity 0.3s easetransition: all 0.3stransformcoloropacity: 0.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:hover@media (hover: hover):focus-withintouchstart.cardtabindex="0".card:focus-within .overlay { opacity: 1; }touchstartis-touched.card.is-touched .overlay, .card:hover .overlay@media (hover: none)