Html 悬停显示文本

我试图隐藏我的元素，直到用户将鼠标悬停在图像上

因此，当用户将光标移动到图像上时，图像上将显示“饮料”一词。我希望文本也在图像的中心

有人能告诉我如何在CSS中实现这一点吗

演示：

李{ 列表样式类型：无； 填充：0； 保证金：0 } 李h2{ 位置：相对位置； 排名：0； } 测验 加上这个

h2{
  display:none;
}
img:hover ~ h2{
  display:block;
}

更新的小提琴。

使用img+h2+用于下一个孩子

李{ 列表样式类型：无； 填充：0； 保证金：0； 显示：内联块； 位置：相对位置； } 李h2{ 位置：相对位置； 排名：0； } .woocommerce-loop-category_uuu标题{ 显示：无； } img:hover+.woocmerce-loop-category\uuuu标题{ 显示：块； 位置：绝对位置； 最高：50%； 宽度：100%； 文本对齐：居中； 转化：translateY-50%； } 测验 使用位置：绝对位置；显示：无；至h2并使其显示：img上的块：hove

保险商实验室{ 填充：0； 保证金：0； } 李{ 列表样式类型：无； 填充：0； 保证金：0； 位置：相对位置； 显示：内联块； } 李h2{ 位置：绝对位置； 最高：50%； 左：50%； 转化：转化-50%； 显示：无； 保证金：0； } 李a：悬停h2{ 显示：块 } 检查一下这个会有用吗

li{列表样式类型：无；填充：0；边距：0；宽度：370px；高度：370px；位置：相对；} 李亚h2{ 位置：绝对位置； 最高：40%； 左：40%； 翻译形式：翻译-50%，-50%； 文本对齐：居中；} .imgbox:悬停+h2{ 可见性：隐藏 }

---

这是你想要的吗？这几乎是完全正确的，然而，梦幻世界会将文本加载到图像的中心。像这样吗？确切地说：-你知道为什么我在文本上悬停时它会闪烁吗？我很高兴我能提供帮助，当用户悬停h2标记它闪烁时，不要忘记在上面的代码中标记answer@AbhishekPandey，这样你就可以将li img:hover+h2更改为li a:hover>h2@frnt谢谢你的更正，我已经更新了我的答案。