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

Question

我正在尝试在鼠标悬停时显示文本，但我不能，也不知道怎么做！ 我尝试了很多 css 代码，但我失败了。 而且我正在学习 javaScript，我想知道如何使用 js 请查看我的代码并帮助我解决我的问题谢谢和抱歉，如果我犯了一些菜鸟错误

 .wrap { width: 200px; height: 200px; margin-right: 20px; position: relative; } .wrap { border-radius: 100%; overflow: hidden; z-index: 1; } .Time{ border-radius: 1000px; margin-right: 20px; overflow: hidden -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } .Time:hover { -webkit-filter: blur(5px); cursor:pointer; }

 <a href="#"<li><div class="wrap"><img src="img/13.jpg" alt="EX" width="200" height="200" class="Time"></div></li></a>

Answer 1

如果您想在悬停时显示除图像之外的文本，请参阅下面的代码片段。

 call(); function call() { document.getElementsByClassName('Time')[0].addEventListener("mouseover", Show); document.getElementsByClassName('Time')[0].addEventListener("mouseout", hide); } function hide() { document.getElementsByClassName('imageText')[0].style.display = 'none'; } function Show() { document.getElementsByClassName('imageText')[0].style.display = 'block'; }

 .wrap { width: 200px; height: 200px; margin-right: 20px; position: relative; } .wrap { border-radius: 100%; overflow: hidden; z-index: 1; } .Time{ border-radius: 1000px; margin-right: 20px; overflow: hidden -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } .Time:hover { -webkit-filter: blur(5px); cursor:pointer; } .imageText { display: none }

 <a href="#"<li><div class="wrap"><img src="img/13.jpg" alt="EX" width="200" height="200" class="Time"></div></li></a> <span class="imageText">text</span>

Answer 2

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

 .wrap { width: 200px; height: 200px; margin-right: 20px; position: relative; } .wrap { border-radius: 100%; overflow: hidden; z-index: 1; } .Time{ border-radius: 1000px; margin-right: 20px; overflow: hidden -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } .TimeTooltip { display: none; position: absolute; top: 90px; left: 90px; } .wrap:hover .Time { -webkit-filter: blur(5px); cursor:pointer; } .wrap:hover .TimeTooltip { display: block; }

 <a href="#"><li><div class="wrap"><img src="img/13.jpg" alt="EX" width="200" height="200" class="Time"><span class="TimeTooltip">tooltip</span></div></li></a>