Javascript 悬停另一层移动，如果该层悬停，则悬停停止

Hover有点有趣，因为在这段代码中有一个新的图层。hide当Hover转换时会出现，它的响应不同。我尝试了不同的东西，比如hide:Hover+img{}和其他如果有人知道它，请帮助在这个问题上是否有任何黑客

事情是有两层，第一层应该淡出不透明度，另一层是动画过渡，这是唯一的文字。也就是。隐藏类，但如果我悬停在上面。隐藏类，悬停导致问题时的转换

现在我使用的z索引不同，但是文本隐藏在图像后面

.catalog{
溢出：隐藏；
宽度：300px；
高度：300px；
保证金：2倍；
}
.目录img：悬停{
过渡：变换500ms，不透明度500ms 0ms缓进缓出；
转换：比例（1.3）；
不透明度：0.3；
}
.隐藏{
z指数：0；
显示：块；
字体大小：10px；
位置：相对位置；
顶部：-50px；
过渡：字体大小为500ms，顶部为500ms，外部为0ms；
宽度：100%；
背景#6c6c934d；
背景尺寸：300px 300px；
颜色：13436c；
}
.catalog img：悬停+隐藏{
字体大小：50px；
顶部：-300px；
填充底部：50px；
}

冰箱

发生此问题是因为您在img:hover上添加了样式，简单地说，默认情况下，这些事件是为选择器本身或其子项之一触发的，在这种情况下，image和div.hide是兄弟项，为了避免此行为，您可以更新代码，在catalog:hover上添加这些样式，catalog:hover是两者的父项，因此，每当你在其中一个上悬停时，你也会在父对象上悬停

.catalog{
溢出：隐藏；
宽度：300px；
高度：300px；
保证金：2倍；
}
.目录：悬停img{
过渡：变换500ms，不透明度500ms 0ms缓进缓出；
转换：比例（1.3）；
不透明度：0.3；
}
.隐藏{
z指数：0；
显示：块；
字体大小：10px；
位置：相对位置；
顶部：-50px；
过渡：字体大小为500ms，顶部为500ms，外部为0ms；
宽度：100%；
背景#6c6c934d；
背景尺寸：300px 300px；
颜色：13436c；
}
.catalog:悬停.隐藏{
字体大小：50px；
顶部：-300px；
填充底部：50px；
}

冰箱

我对您在这里提出的问题感到困惑，但首先，您的

标签拼写错误。而且，
label
不是您所做工作的正确元素。你应该使用
figure
和
figcaption
来做类似的事情。谢谢，我会尝试这样做，但不起作用，问题是有两层，第一层应该淡入淡出，另一层通过动画过渡，这只是文字。