数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何使鼠标悬停在图像上时显示字体？
本文将介绍如何实现鼠标悬停在图像上时显示字体。让我们深入了解文章，并快速了解 HTML 中的悬停和鼠标悬停。
HTML 中的onmouseover事件在鼠标指针触及元素时触发。当鼠标指针离开元素时，会发生名为onmouseout的事件。
当用户使用指向设备与元素交互时，:hover CSS 伪类匹配，但并不总是被激活。通常，当用户将光标悬停在元素上（鼠标指针）时，它会被激活。
语法
以下是hover的语法：
:hover
为了更好地理解如何在鼠标悬停在图像上时显示字体，让我们来看以下示例。
示例
在下面的示例中，我们使鼠标悬停在图像上时字体可见。
<!DOCTYPE html>
<html>
<body>
<style>
.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;
}
</style>
<div class="img">
<img src='https://tutorialspoint.com/html/images/html-mini-logo.jpg' width='100%' height='100%'>
<div>TP HTML LOGO</div>
</div>
<div class="img">
<img src='https://tutorialspoint.com/java/images/java-mini-logo.jpg' width='100%' height='100%'>
<div>TP JAVA LOGO</div>
</div>
</body>
</html>
当脚本执行时，它将生成一个输出，在网页上显示一个图像。如果用户将鼠标悬停在图像上，它将在页面上显示该特定图像的文本描述。
示例
在下面的示例中，我们使鼠标悬停在图像上时字体出现，并且它覆盖整个图像。
<!DOCTYPE html>
<html>
<body>
<style>
.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;
}
</style>
<div class="tutorial">
<img src=https://tutorialspoint.com/java/images/java-mini-logo.jpg>
<div class="fulltext">
LEARN JAVA...!<br>
</div>
</div>
</body>
</html>
运行上述脚本后，输出窗口将弹出，在网页上显示一个图像。如果用户将鼠标移到图像上，它将显示覆盖整个图像的文本。
示例
执行以下代码，观察鼠标悬停在图像上时字体是如何显示的。
<!DOCTYPE html>
<html>
<body>
<style>
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
}
</style>
<div>
<img src="https://tutorialspoint.com/static/images/logo-color.png">
<p>Welcome to Tutorialspoint</p>
</div>
</body>
</html>
当脚本执行时，输出窗口将弹出，使图像在网页上以圆形显示。当用户将鼠标悬停在图像上时，它将显示文本。
更新于： 2023年4月20日
781 次浏览
广告