Html 如何将文本淡入悬停效果应用于表格中的图像？

我试图在将鼠标悬停在表格中的图像上时添加文本淡入效果。我已经让它自己处理图像，但是当我尝试将它应用到table元素时，它不起作用。当我将鼠标悬停在图像上时，不会发生任何事情。我觉得我安排错了什么。在桌子上不可能吗

代码如下：

桌子{ 文本对齐：居中； 左边距：自动； 右边距：自动； 边界间距：50px； 边界塌陷：分离； } 运输署{ 最大宽度：150px； 最大高度：150像素； 文本对齐：居中； } .覆盖{ 位置：绝对位置； 排名：0； 底部：0； 左：0； 右：0； 身高：100%； 宽度：100%； 不透明度：0； 过渡：放松； 背景色：008CBA； } .container:悬停。覆盖{ 不透明度：1； } .文本{ 颜色：黑色； 字体大小：20px； 位置：绝对位置； 最高：50%； 左：50%； 转化：转化-50%，-50%； -ms转换：翻译-50%，-50%； 文本对齐：居中； } 第一类 第2类 第3类 覆盖文本

---

最大的问题是在TD元素周围放置div。 css几乎没问题，但这里有一个提示：

位置：绝对元素将被约束在其他位置非静态元素相对、其他绝对和固定，因此对于TD包含绝对覆盖，它必须是相对的

.电网{ 文本对齐：居中； 左边距：自动； 右边距：自动； 边界间距：50px； 边界塌陷：分离； } .电网运输署{ 位置：相对位置； 最大宽度：150px； 最大高度：150像素； 文本对齐：居中； } .覆盖{ 位置：绝对位置； 排名：0； 底部：0； 左：0； 右：0； 身高：100%； 宽度：100%； 不透明度：0； 过渡：不透明度。5s缓解； -webkit过渡：不透明度。5s轻松； -moz过渡：不透明度。5s缓解； -o-转变：不透明度。5s缓解； 背景色：008CBA； z指数：1000； } .grid td：悬停。覆盖{ 不透明度：1； } .文本{ 颜色：黑色； 字体大小：20px； 位置：绝对位置； 最高：50%； 左：50%； 转化：转化-50%，-50%； -webkit转换：翻译-50%，-50%； -moz变换：平移-50%，平移-50%； -ms转换：翻译-50%，-50%； 文本对齐：居中； } 第一类 第2类 第3类 覆盖文本

---

只是澄清一下；要将鼠标悬停在cat图像上，并且每次悬停都要使.text元素淡入？表的结构必须是CONTENT。容器div直接位于元素内部，这是无效的。浏览器将尝试通过将容器移到表外来解决此问题，我假设这会破坏您预期的功能。将来，只需单击鼠标右键>检查元素。。。可以很容易地揭示这样的问题。要添加到我上面的评论中，如果您只想用CSS来实现这一点，您可能需要在每个评论中添加一个容器/覆盖。否则，您可以使用一个覆盖并使用javascript定位它。非常感谢！抱歉弄得一团糟……这里完全是初学者。我真的很感激！这就是社区的目的！顺致敬意，哦顺便说一句，如果是这样的话，请检查答案是否正确，并竖起大拇指！最好的