使用css和javascript将鼠标悬停在图像上时显示文本

我正试图在鼠标上方显示文字，但我不能，也不知道怎么做！ 我尝试了很多css代码，但都失败了。 我也在学习javaScript，我想知道如何使用js 请查看我的代码并帮助我解决问题 如果我犯了一些新手错误，谢谢你，对不起

.wrap{
宽度：200px；
高度：200px；
右边距：20px；
位置：相对位置；
}
.包裹{
边界半径：100%；
溢出：隐藏；
z指数：1；
}
.时间{
边界半径：1000px；
右边距：20px；
溢出：隐藏
-webkit过渡：所有1s轻松；
-moz转换：所有1秒轻松；
-o-过渡：所有1容易；
-ms转换：所有1秒轻松；
过渡：所有的1容易；
}
.时间：悬停{
-webkit过滤器：模糊（5px）；
光标：指针；
}

---

若要在悬停时显示图像以外的文本，请参阅下面的代码段

call（）；
函数调用（）{
document.getElementsByClassName（'Time'）[0].addEventListener（“鼠标悬停”，显示）；
document.getElementsByClassName（'Time'）[0].addEventListener（“mouseout”，hide）；
}
函数hide（）{
document.getElementsByClassName（'imageText'）[0].style.display='none'；
}
函数Show（）{
document.getElementsByClassName（'imageText'）[0].style.display='block'；
}

.wrap{
宽度：200px；
高度：200px；
右边距：20px；
位置：相对位置；
}
.包裹{
边界半径：100%；
溢出：隐藏；
z指数：1；
}
.时间{
边界半径：1000px；
右边距：20px；
溢出：隐藏
-webkit过渡：所有1s轻松；
-moz转换：所有1秒轻松；
-o-过渡：所有1容易；
-ms转换：所有1秒轻松；
过渡：所有的1容易；
}
.时间：悬停{
-webkit过滤器：模糊（5px）；
光标：指针；
}
.imageText{
显示：无
}

text

这是一个没有javascript的解决方案

.wrap{
宽度：200px；
高度：200px；
右边距：20px；
位置：相对位置；
}
.包裹{
边界半径：100%；
溢出：隐藏；
z指数：1；
}
.时间{
边界半径：1000px；
右边距：20px；
溢出：隐藏
-webkit过渡：所有1s轻松；
-moz转换：所有1秒轻松；
-o-过渡：所有1容易；
-ms转换：所有1秒轻松；
过渡：所有的1容易；
}
.时间工具提示{
显示：无；
位置：绝对位置；
顶部：90px；
左：90px；
}
.wrap:悬停。时间到了{
-webkit过滤器：模糊（5px）；
光标：指针；
}
.wrap:hover.TimeTooltip{
显示：块；
}

---

要显示什么文本？您的代码片段的HTML中没有文本。请提供HTML结构，对于我们需要查看HTML的javascript方式，您想在图像上或图像之外显示文本吗？好，如果您想学习javascript，那么您可以在示例或其他javascript库/文档中查找，或者尝试stackoverflow文档：示例：谢谢，它很有效，但图像左上方的文本apear不在其上。如何做到这一点？我修改了答案，使它或多或少地出现在图像的中心。要移动它，您需要修改“top”和“left”css属性。