我们在本文中要执行的任务是如何在将鼠标悬停在图像上时显示字体。让我们深入研究本文并快速了解 HTML 中的悬停和鼠标悬停。
HTML 中的 onmouseover 事件在鼠标指针触摸某个元素时触发。当鼠标指针离开某个元素时，会发生一个名为 onmouseout 的事件。
当用户使用指点设备与元素交互时，:hover CSS 伪类会匹配，但它并不总是被激活。通常，当用户将光标悬停在元素（鼠标指针）上时，它会被激活。
语法
以下是悬停的语法 –
:hover
为了更好地理解将鼠标悬停在图像上时显示字体，让我们看看以下示例。
示例
在下面的示例中，当鼠标悬停在图像上时，我们使字体可见。
.img { position: relative; width: 200px; height: 200px; float: left; margin-right: 10px; } .img div{ position: absolute; bottom: 0; right: 0; background: black; color: white; margin-bottom: 5px; visibility: hidden; } .img:hover{ cursor: pointer; } .img:hover div{ width: 150px; padding: 8px 15px; visibility: visible; opacity: 0.7; } 
TP HTML LOGO 
TP JAVA LOGO
当脚本执行时，它将生成一个输出，在网页上显示图像。如果用户将鼠标悬停在图像上，它将在页面上显示该特定图像的文本描述。
示例
在下面的示例中，我们让字体在鼠标悬停在图像上时出现，并且覆盖整个图像。
.tutorial { position: relative; max-width: 500px; } .tutorial img { width: 100%; } .fulltext { box-sizing: border-box; width: 100%; height: 100%; position: absolute; top: 0; left: 0; text-align: center; padding-top: 30%; background-color: #EAFAF1 ; color: black; } .fulltext { visibility: none; opacity: 0; transition: opacity 0.3s; } .tutorial:hover .fulltext { visibility: visible; opacity: 1; } LEARN JAVA...!
运行上述脚本时，将弹出输出窗口，在网页上显示图像。如果用户将鼠标移动到图像上，它将显示覆盖整个图像的文本。
示例
执行以下代码，观察将鼠标悬停在图像上时字体如何显示。
div { position: relative; top: 0px; left: 0px; width: 400px; height: 400px; border-radius: 50%; overflow: hidden; text-align: center } img { width: 400px; height: 400px; position: absolute; border-radius: 50% } img:hover { opacity: 0; transition:opacity 2s; } heading { line-height: 40px; font-weight: bold; text-align: center; position: absolute; display: block } div p { width: 420px; line-height: 20px; display: inline-block; padding: 200px 0px; vertical-align: middle; height: 450px } 
Welcome to Tutorialspoint
当脚本执行时，会弹出输出窗口，使图像在网页上显示为圆形。当用户将鼠标悬停在图像上时，它将显示文本。
以上就是如何在鼠标悬停在图像上时显示字体？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1551923.html
微信扫一扫 
支付宝扫一扫 
