Javascript 如何在将鼠标悬停在图像上时显示文本

当我将鼠标悬停在图像上时，如何使这样的文本显示出来？一些tumblr主题也有同样的功能，所以我想知道你是如何做到的

你可以试试这个

.container{
宽度：200px；
高度：200px；
文本对齐：居中；
显示器：flex；
证明内容：中心；
对齐项目：居中；
位置：相对位置；
}
.隐藏{
显示：无；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
img{
宽度：200px；
高度：200px；
}
img：悬停+隐藏{
显示：块；
}
.隐藏：悬停{
动画：颜色变化1s无限；
}
@关键帧颜色更改{
0%{颜色：橙色；}
50%{颜色：绿色；}
75%{颜色：黄色；}
100%{颜色：浅蓝色；}
}

当有人悬停图像时，将显示此文本

let test=document.getElementById（“test”）；
test.addEventListener（“鼠标悬停”，函数（事件）{
//突出显示鼠标悬停目标
event.target.style.color=“橙色”；
//短暂延迟后重置颜色
setTimeout（函数（）{
event.target.style.color=“”；
}, 500);
}，假）
#中心{
显示器：flex；
证明内容：中心；
对齐项目：居中；
高度：300px；
宽度：300px；
背景：url（'https://www.iso.org/files/live/sites/isoorg/files/news/News_archive/2017/08/Ref2213/Ref2213.jpg/thumbnails/300x300');
颜色：#fff
}

苔丝

@anon我希望这有助于找到让我的文字居中的方法？谢谢你，顺便说一句@我已经编辑了我的答案，文本应该在中间，现在你可以看看编辑后的答案，我很确定这就是你想要的want@anon如果您还有其他疑问，请告诉我，欢迎来到Stack Overflow！参观，坐下来看看。请提供答案，以便我们更好地回答您的问题。谢谢