Html 延迟悬停效果-防止关闭覆盖

我创建了一个悬停效果，模糊了图片，并显示了文字描述

现在，只要我将鼠标悬停在描述上方，我就不会将图像悬停，效果就会失败，这是我想要阻止的

我假设，如果我可以将描述的悬停版本作为目标，我可以将其自身设置为可见，但我不确定这一点

还有其他的想法吗？我如何创造这个

.flexbox{
位置：相对位置；
显示器：flex；
高度：70vh；
弯曲方向：行；
宽度：90%；
左缘：5%；
最大高度：80vh；
}
.集装箱{
宽度：100%；
最大高度：继承；
填充：0；
利润率：1%；
显示：块；
文本对齐：居中；
}
.图像类别{
宽度：100%；
对象匹配：覆盖；
身高：100%；
不透明度：0.95；
最大高度：继承；
溢出：隐藏；
}
.图像描述{
填充：10px；
转换：translateY（-30vh）；
不透明度：0；
z指数：-1；
字体大小：20px；
}
.图像类别：悬停{
过滤器：模糊（2px）；
}
.图像类别：悬停~.图像描述{
不透明度：100；
z指数：2；
}
.说明{
字号：1.25em；
背景：rgba（255，255，255，0.7）；
}
.索赔{
填充：1vh 0 1vh 0；
宽度：100%；
文本对齐：居中；
}

延迟悬停

Haushalts-und Friseurscheren

Aktuelle Auswahl和Küchenmessern

Klingen für Haushaltsmesser

使用以下代码：

.flexbox{
位置：相对位置；
显示器：flex；
高度：70vh；
弯曲方向：行；
宽度：90%；
左缘：5%；
最大高度：80vh；
}
.集装箱{
宽度：100%；
最大高度：继承；
填充：0；
利润率：1%；
显示：块；
文本对齐：居中；
}
.图像类别{
宽度：100%；
对象匹配：覆盖；
身高：100%；
不透明度：0.95；
最大高度：继承；
溢出：隐藏；
}
.图像描述{
填充：10px；
转换：translateY（-30vh）；
不透明度：0；
z指数：-1；
字体大小：20px；
}
.container:hover.image类别{
过滤器：模糊（2px）；
}
.container:悬停。图像描述{
不透明度：100；
z指数：2；
}
.说明{
字号：1.25em；
背景：rgba（255，255，255，0.7）；
}
.索赔{
填充：1vh 0 1vh 0；
宽度：100%；
文本对齐：居中；
}

延迟悬停

Haushalts-und Friseurscheren

Aktuelle Auswahl和Küchenmessern

Klingen für Haushaltsmesser

---

。图像类别：hover~。图像描述

-->

。图像类别：hover~。图像描述，图像描述：hover

我认为这是一个可行的解决方案。现在，当我将鼠标悬停在图像描述上时，模糊效果正在消失。是否有一种方法可以实现图像描述：悬停。图像类别{filter:blur（2px）}考虑将悬停放在

容器上，您可以将其中的所有内容作为目标