仅当CSS转换开始时才在div中显示文本？

我有以下资料：

我试图只在悬停效果（透明度）生效时显示文本。文本应该是完全不透明的，非常可读，但只能悬停在不透明图像的顶部。这可以只用CSS来完成吗

。图像img{
宽度：200px；
高度：200px；
}
.褪色{
不透明度：1；
过渡：不透明度。25秒缓进缓出；
-moz过渡：不透明度。25秒缓进缓出；
-webkit过渡：不透明度。25秒易入易出；
}
.消失：悬停{
不透明度：0.4；
}
.形象{
背景色：黑色；
宽度：300px；
}
.文本{
颜色：红色；
位置：绝对位置；
顶部：10px；
左：100px；
可见性：隐藏；
宽度：100%；
身高：100%；
}
.文本：悬停{
能见度：可见；
}
}

试验

不要在子元素悬停时触发，而是使用嵌套选择器在包含元素悬停时触发：

div:hover .fade {
    opacity: 0.4;
}
div:hover .text{
    visibility: visible;
}

这是唯一可行的方法，因为否则元素会相互模糊，因此它们本身不会同时获得

：hover

行为。但是，父级会这样做，允许您选择其子级

---

.

在默认情况下，尝试将文本颜色设置为透明，并在悬停时为其指定颜色，同时在html代码中将文本置于图像之前。我一行一行地处理并粘贴到我的解决方案中，但图像总是显示为纯黑色，除非我悬停，然后不透明度生效。我的文本在标记中位于图像下方，就像在小提琴中一样。知道为什么会发生这种情况吗？我没有一个水晶球来研究你的解决方案，但显而易见的答案是“CSS中的其他东西”正在干扰。正如您可以从小提琴中看到的那样，干净的自包含示例运行良好。