hover遮罩不出现或闪动的根本原因是触发区域太小、父容器未设position: relative或子元素为内联元素；需确保父容器relative、遮罩absolute且同级、显式设置img为block、遮罩opacity初始为0并配transition。
hover时遮罩层不出现或闪动
常见现象是鼠标移上去遮罩没反应，或者刚碰到就闪一下又消失。根本原因是触发区域太小、父容器没设position: relative，或者子元素（比如图片）默认是内联元素，导致:hover作用域错位。
实操建议：
- 确保遮罩层的父容器有
position: relative，遮罩层本身用position: absolute - 遮罩层必须和内容同级且包裹在同一个父容器里，不能放在
<img>内部 - 给遮罩层加
top: 0; left: 0; width: 100%; height: 100%，避免尺寸塌陷 - 如果父容器是
<img>，它默认是display: inline，得显式设成display: block或包一层<div> <h3>opacity过渡生硬或不生效</h3> <p><code>opacity本身支持CSS动画，但直接写hover { opacity: 0.8 }会瞬间切换。要淡入就得加transition，而很多人漏掉这点，或只写了transition: opacity 0.3s却没配opacity初始值。实操建议：
- 遮罩层默认必须设
opacity: 0，hover时才设opacity: 0.7这类值 -
transition写在默认状态里，不是hover里，推荐写全：transition: opacity 0.3s ease-in-out - 避免同时过渡
opacity和visibility——visibility不支持过渡，会导致立即消失，破坏淡入效果 - 若需兼容老版本Safari，可加
-webkit-transition前缀，但现代项目基本不用
遮罩文字看不清或点击失效
遮罩层加上后，里面文字发虚、点击按钮没响应，通常是因为z-index层级不对，或遮罩挡住了下层交互元素。
实操建议：
- 遮罩层设
z-index: 1，内容文字/按钮设z-index: 2（注意：z-index只对定位元素生效，记得加position: relative） - 遮罩层本身别设
pointer-events: none，否则hover失效；但如果想穿透点击，才加这句 - 文字颜色要和遮罩背景反差足够，比如深色遮罩配白色文字，别用
rgba(0,0,0,0.5)配灰色字 - 避免在遮罩层上直接放
<a></a>标签却不设display: block，导致点击热区过小
移动端hover无效或延迟触发
手机上没有“悬停”概念，
:hover在iOS Safari和部分安卓浏览器里要么不触发，要么要点两下才生效。这不是bug，是规范行为。实操建议：
- 纯移动端项目，别依赖
:hover做核心交互，改用:active或JS监听touchstart - 如果必须兼顾PC和移动，可用
@media (hover: hover) and (pointer: fine)做媒体查询，只对支持hover的设备启用该效果 - 测试时别只在Chrome模拟器点，真机连点两次才能触发hover，说明它已降级为点击逻辑
- 某些安卓WebView会把第一次触摸当成hover，第二次才当click，这时可在JS里加
touchstart事件提前激活遮罩
position上下文和transition的书写位置——这两处一错，整个效果就静音了，调半天才发现是基础样式没铺好。 - 遮罩层默认必须设
