Html ：：在将内容放入figcaption之前，有没有办法避免这种情况？

图像由与图像大小相同的灰色框（带数字）隐藏。当鼠标悬停在上方时，灰色会淡出并显示图像，过一段时间，图像顶部的文本会淡出

我开始向后写，在写“框”的淡入淡出之前，先写文本的淡入淡入淡出淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡。为什么会发生这种情况，有没有办法解决我的问题

以下是代码的相关部分

剖面图{
反增量：nummg；
显示器：flex；
位置：相对位置；
}
截面图：：前{
背景：rgba（0,0,0,0.5）；
内容：计数器（numImg）；
位置：绝对位置；
排名：0；
左：0；
字号：2rem；
颜色：#0e533e；
宽度：200px；
高度：200px；
z指数：3；
线高：200px；
文本对齐：居中；
}
剖面图：悬停图{
过渡：不透明度。7秒缓进缓出；
不透明度：1；
}
剖面图figcaption{
文本阴影：0px 0px 2px白色；
字号：2em；
文本对齐：居中；
对齐内容：居中对齐；
宽度：200px；
z指数：1；
位置：绝对位置；
顶部：-0px；
不透明度：0；
}

应该淡入的文本

据我所知，伪before对象并没有出现在figcaption元素中，而是出现在figure元素中。我为before元素添加了一个悬停状态，以便在文本显示的同时将其淡出，因此它看起来就像您希望的那样

剖面图{
反增量：nummg；
显示器：flex；
位置：相对位置；
}
剖面图：之前{
背景：rgba（0,0,0,0.5）；
内容：计数器（numImg）；
位置：绝对位置；
排名：0；
左：0；
字号：2rem；
颜色：#0e533e；
宽度：200px；
高度：200px；
z指数：3；
线高：200px；
文本对齐：居中；
过渡：不透明度。7秒缓进缓出；
不透明度：1；
}
剖面图figcaption{
文本阴影：0px 0px 2px白色；
字号：2em；
文本对齐：居中；
对齐内容：居中对齐；
宽度：200px；
z指数：1；
位置：绝对位置；
顶部：-0px；
不透明度：0；
过渡：不透明度。7秒缓进缓出；
}
剖面图：悬停：之前{
不透明度：0；
}
剖面图：悬停图{
不透明度：1；
}

应该淡入的文本

您能再解释一下您的问题吗？是不是你不想让计数器在图像显示之前出现？或者图像没有显示在hover上？我不确定你所描述的确切问题。