CSS伪类:hover在Flex布局中如何实现图片遮罩？-css教程-PHP中文网

hover伪类在flex容器中失效的主因是遮罩层塌陷或定位错误；需确保父容器有明确高度、遮罩设absolute+100%宽高+z-index、hover绑定包裹容器而非图片，并避免flex换行导致错位。

css伪类: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 绑定到包裹层。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

.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 在容器上，才能源源不断地控制遮罩显隐。