hover伪类在Flex容器中失效的主因是遮罩层塌陷或定位错误；需确保父容器有明确高度、遮罩设absolute+100%宽高+z-index、hover绑定包裹容器而非图片，并避免Flex换行导致错位。
hover伪类在Flex容器里失效的常见原因
直接给Flex容器加 :hover 通常能触发，但遮罩层不显示，大概率是层级或尺寸问题。Flex项目默认不占满父容器高度，div 类型的遮罩层如果没有明确宽高或内容撑开，会塌陷成 0×0 —— 此时鼠标悬停区域实际是空的，:hover 根本没生效。
- 检查遮罩元素是否设置了
width: 100%和height: 100%（或min-height: 100%），且父容器有明确高度（比如height: 300px或aspect-ratio） - 确认 Flex 容器未设置
overflow: hidden且遮罩层未被裁剪 - 避免用
display: flex的子项直接作为遮罩载体（如把遮罩写在img标签上），img是替换元素，无法容纳子元素
遮罩层必须用绝对定位 + z-index
Flex布局本身不改变定位规则，但遮罩要覆盖图片，就得脱离文档流。相对定位的父容器 + 绝对定位的遮罩是最稳妥组合，否则容易错位或随Flex换行偏移。
- 给包裹图片和遮罩的父容器加
position: relative - 遮罩层设
position: absolute; top: 0; left: 0; width: 100%; height: 100% -
z-index至少比图片高（例如图片z-index: 1，遮罩z-index: 2），否则 hover 时可能被其他元素盖住 - 不要依赖 Flex 的
align-items或justify-content来“居中”遮罩层 —— 它们只作用于 Flex 子项，对position: absolute元素无效
hover触发对象必须是包含遮罩的容器，不是图片本身
很多人写 img:hover .overlay，这完全无效 —— img 是单标签，不能包含子元素，更不会触发后代选择器。真正有效的写法是把 hover 绑定到包裹层。
.card {
position: relative;
display: flex;
}
.card:hover .overlay {
opacity: 1;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.6);
opacity: 0;
transition: opacity 0.3s;
}
注意：这里 .card 是 Flex 容器，内部可放 img 和 .overlay 两个兄弟元素；:hover 在容器上，才能源源不断地控制遮罩显隐。
立即学习“前端免费学习笔记（深入）”；
Flex方向变化时遮罩容易错位
如果 Flex 容器设了 flex-direction: column 或启用了换行（flex-wrap: wrap），而遮罩层又没限制最大尺寸，它可能被拉伸或挤压变形。尤其当图片宽高比与容器不一致时，height: 100% 可能超出预期。
- 优先用
aspect-ratio固定容器比例，再让遮罩匹配 - 遮罩层加
pointer-events: none防止干扰图片点击，但需确保内部按钮等交互元素单独设pointer-events: auto - 移动端缩放时，
vh/vw单位比百分比更可靠，但要注意 Safari 对aspect-ratio支持较晚（iOS 15.4+）
最麻烦的其实是图片加载延迟导致遮罩初始尺寸计算错误 —— 如果图片还没加载完，height: 100% 可能按 0 计算。稳妥做法是给图片设 min-height: 100% 或用 object-fit: cover 配合固定容器尺寸。
