Javascript 如何在flex容器中悬停到flex项上放置覆盖

这是我的密码。我想把灰色覆盖在每个flexItem的内容上。该层也必须位于图像上方。我找不到解决办法，有人知道吗

我尝试在flexCont上使用相对位置，在flexItem覆盖上使用绝对位置，但无需操作

我在js中有一个函数，在悬停时应用一个覆盖类，如果你不再悬停，就删除它

$（'.flexItem'）。悬停(
函数（）{
$（this.addClass（'overlay'）；
console.log（'hover'）
}，函数（）{
$（this.removeClass（'overlay'）；
console.log（'无悬停'）
}
);
.flexCont{
显示器：flex；
显示：-ms flex；
显示：-webkit flex；
弯曲方向：行；
}
.flexContO{
显示器：flex；
显示：-ms flex；
显示：-webkit flex；
弯曲方向：行；
}
.flexContO>div{
宽度：50%；
}
.flexCont.flexItem{
弹性：125%；
}
1.flexItem{
显示器：flex；
弯曲方向：立柱；
}
.覆盖{
背景色：rgba（0,0,0,0.5）；/*使背景变暗*/
位置：相对位置；
z指数：999！重要；
}
.flexItemV{
显示器：flex；
弯曲方向：立柱；
证明内容：之间的空间；
}
福莱西特莫先生{
显示器：flex；
弯曲方向：行；
}
.flexItemO>div{
宽度：50%；
}
.flexItem1{
身高：375px；
证明内容：中心；
对齐项目：居中；
显示器：flex；
弯曲方向：立柱；
文本对齐：居中；
填充：20px；
}
.flexItem2>img{
宽度：100%；z指数：99！重要；
}
.flexItemV1{
}
.flexItemV2{
}
.

放置

u&；d 4


放置

d&；u3


放置

d&；铀2


放置

u&；d 1


好的，您可以使用
after
伪元素来设置样式。检查这个


$（'.flexItem'）。悬停(
函数（）{
$（this.addClass（'overlay'）；
}，函数（）{
$（this.removeClass（'overlay'）；
}
);
.flexCont{
显示器：flex；
显示：-ms flex；
显示：-webkit flex；
弯曲方向：行；
}
.flexContO{
显示器：flex；
显示：-ms flex；
显示：-webkit flex；
弯曲方向：行；
}
.flexContO>div{
宽度：50%；
}
.flexCont.flexItem{
弹性：125%；
}
1.flexItem{
显示器：flex；
弯曲方向：立柱；
}
.覆盖{
/*调暗背景*/
位置：相对位置；
}
.覆盖：之后{
内容：“；
背景色：rgba（0,0,0,0.5）；
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
}
.flexItemV{
显示器：flex；
弯曲方向：立柱；
证明内容：之间的空间；
}
福莱西特莫先生{
显示器：flex；
弯曲方向：行；
}
.flexItemO>div{
宽度：50%；
}
.flexItem1{
身高：375px；
证明内容：中心；
对齐项目：居中；
显示器：flex；
弯曲方向：立柱；
文本对齐：居中；
填充：20px；
}
.flexItem2>img{
宽度：100%；
z指数：99！重要；
}

放置

u&；d 4


放置

d&；u3


放置

d&；铀2


放置

u&；d 1


您可以使用以下更新的代码：


$（'.flexItem'）。悬停(
函数（）{
$（this.addClass（'overlay'）；
$（this.find（'img'）.css（'opacity'，'0.6'）；
//console.log（'hover'）
}，函数（）{
$（this.removeClass（'overlay'）；
$（this.find（'img'）.css（'opacity'，'1'）；
//console.log（'无悬停'）
}
);
.flexCont{
显示器：flex；
显示：-ms flex；
显示：-webkit flex；
弯曲方向：行；
}
.flexContO{
显示器：flex；
显示：-ms flex；
显示：-webkit flex；
弯曲方向：行；
}
.flexContO>div{
宽度：50%；
}
.flexCont.flexItem{
弹性：125%；
}
1.flexItem{
显示器：flex；
弯曲方向：立柱；
}
.覆盖{
背景色：rgba（0,0,0,0.5）；/*使背景变暗*/
位置：相对位置；
z指数：999！重要；
}
.flexItemV{
显示器：flex；
弯曲方向：立柱；
证明内容：之间的空间；
}
福莱西特莫先生{
显示器：flex；
弯曲方向：行；
}
.flexItemO>div{
宽度：50%；
}
.flexItem1{
身高：375px；
证明内容：中心；
对齐项目：居中；
显示器：flex；
弯曲方向：立柱；
文本对齐：居中；
填充：20px；
}
.flexItem2>img{
宽度：100%；
z指数：99！重要；
}

放置

u&；d 4


放置

d&；u3


放置

d&；铀2


放置

u&；d 1


这里没有任何实际的“覆盖”，您只是设置
.flexItem
元素本身的背景。因此，您正在设置的背景色当然不会“覆盖”图像，因为图像是元素的内容，而背景位于后面

您只需使用一个伪元素，放置在元素的其余部分上，即可：


$（'.flexItem'）。悬停(
函数（）{
$（this.addClass（'overlay'）；
console.log（'hover'）
}，函数（）{
$（this.removeClass（'overlay'）；
console.log（'无悬停'）
}
);
.f