如何在鼠标悬停在图像上时显示字体？
我们在本文中要执行的任务是如何在将鼠标悬停在图像上时显示字体。让我们深入研究本文并快速了解 HTML 中的悬停和鼠标悬停。
HTML 中的 onmouseover 事件在鼠标指针触摸某个元素时触发。当鼠标指针离开某个元素时，会发生一个名为 onmouseout 的事件。
当用户使用指点设备与元素交互时，:hover CSS 伪类会匹配，但它并不总是被激活。通常，当用户将光标悬停在元素（鼠标指针）上时，它会被激活。
语法
以下是悬停的语法 -
: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="/static/imghw/default1.png" data-src="https://www.tutorialspoint.com/static/images/logo-color.png" class="lazy" style="max-width:90%" style="max-width:90%" alt="如何在鼠标悬停在图像上时显示字体？" >
<div>TP HTML LOGO</div>
</div>
<div class="img">
<img src="/static/imghw/default1.png" data-src="https://www.tutorialspoint.com/static/images/logo-color.png" class="lazy" style="max-width:90%" style="max-width:90%" alt="如何在鼠标悬停在图像上时显示字体？" >
<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="/static/imghw/default1.png" data-src="https://www.tutorialspoint.com/static/images/logo-color.png" class="lazy" src=https://www.tutorialspoint.com/java/images/java-mini-logo.jpg alt="如何在鼠标悬停在图像上时显示字体？" >
<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="/static/imghw/default1.png" data-src="https://www.tutorialspoint.com/static/images/logo-color.png" class="lazy" alt="如何在鼠标悬停在图像上时显示字体？" >
<p>Welcome to Tutorialspoint</p>
</div>
</body>
</html>当脚本执行时，会弹出输出窗口，使图像在网页上显示为圆形。当用户将鼠标悬停在图像上时，它将显示文本。
以上是如何在鼠标悬停在图像上时显示字体？的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
7649
15
1392
52
91
11
73
19
36
110
win10字体文件夹路径详情
Jan 03, 2024 pm 08:37 PM
在输入文字的时候很多的小伙伴都喜欢加入自己喜爱的个性字体，但是不知道win10系统的字体文件夹路径在哪而没法加入字体，下面就为大家介绍一下具体的文件夹路径。win10字体文件夹路径：1、点击桌面的“此电脑”。2、进入系统盘C盘。3、点击“windows”文件夹。4、下拉找到“Fonts”文件夹。5、即可进入字体库。还有其他问题的小伙伴可以看看了解更多有关win10字体常见的问题~
苹果手机outlook怎么更改字体
Mar 08, 2024 pm 04:46 PM
苹果手机outlook怎么更改字体呢，首先打开outlook软件，在界面点击左上角的文件。可以根据自己的喜好进行设置字体，设置完成之后，点击确定按钮即可。让我们一起来看看吧！苹果手机outlook怎么更改字体1、打开outlook软件，在界面点击左上角的“文件”选项。2、在出现的列表中，找到“选项”并点击进入。3、在选项列表的左侧，点击“邮件”。4、接着，选择“信纸和字体”。5、如果想要设置新邮件、回复邮件或者撰写中的字体，点击相应选项进入设置。6、根据个人喜好对字体进行设置，设置完成后，点击确
如何解决win11字体模糊问题
Jan 13, 2024 pm 09:00 PM
有的朋友在更新完win11系统后，发现自己的win11字体模糊不清，使用起来非常的难受，这可能是由于系统版本bug导致，也可能是我们开启了特殊效果，下面就跟着小编一起来看看应该怎么解决吧。win11字体模糊不清：方法一：1、首先右键此电脑，打开“属性”2、接着进入相关链接中的“高级系统设置”3、然后点击性能中的“设置”打开。4、在“视觉效果”下勾选“调整为最佳性能”并点击“确定”保存即可。方法二：1、右键桌面空白处，打开“显示设置”2、点击缩放和布局下的“缩放”3、再点击进入相关设置下的“文本大
vivo手机字体怎么变大在哪设置
Feb 24, 2024 pm 06:16 PM
vivo手机字体怎么变大在哪设置?在vivo手机中是可以把字体变大，但是多数的用户不知道如何设置vivo手机字体，接下来就是小编为用户带来的vivo手机字体怎么变大设置方法图文教程，感兴趣的用户快来一起看看吧！vivo手机使用教程vivo手机字体怎么变大在哪设置1、首先打开vivo手机中的【设置】功能点击;2、接着跳转到设置的界面，找到其中的【显示与亮度】功能;3、然后到达下图的页面，点击【字体大小与粗细】服务;4、最后滑动下图的横线调整字体的大小。
Win11字体安装方法详细解释
Dec 27, 2023 pm 05:16 PM
有的朋友在安装win11字体后，找不到自己的字体安装在哪里了，因此提出了win11字体安装位置的问题，其实我们可以进入个性化中的字体管理，就可以找到字体安装的位置了，下面一起来看看吧。win11字体安装位置：1、首先右键桌面空白处，打开“个性化”设置。2、接着进入其中的“字体”安装管理设置。3、在其中找到你想要的字体进入。4、如果找不到，也可以直接在上方搜索。5、进入字体后，在元数据下的“字体文件”处就可以看到win11字体安装位置了。6、如果我们想要卸载字体，那么点击这里的卸载即可。
解决Linux字体模糊问题的有效方法
Jan 08, 2024 pm 11:25 PM
Linux字体发虚，想要让字体清晰显示，该怎么实现呢？下面我们就来看看详细的教程。一、安装字体文件1、下载上面工具提供的文件，然后把文件拖到桌面，进行解压。如下图所示那样子，因为文件已经解压这里是文件夹形式。2、接着在桌面不要点击任何东西，右键选择在终端打开。在终端输入命令：sudodpkg-i按一下空格。打开桌面已经解压的字体文件，deb包分别拖入这个命令的-i后面，一个拖入。回车后会出现错误，提示错误说明依赖没有安装。提示依赖错误才是命令输入正常，否则就是错误命令。新手一定要注意空格大小写，
手机QQ浏览器怎么更换字体
Apr 07, 2024 pm 06:43 PM
手机QQ浏览器怎么更换字体？不少人喜欢使用手机QQ浏览器，这款浏览器不仅可以快速浏览网页，还能处理各类文件数据，并且这款浏览器还拥有个性化设置，大家可以根据自己的喜好设置浏览器的字体，不少新手用户还不清楚如何更换这款浏览器的字体。本篇文章就给大家带来手机QQ浏览器更换字体步骤一览，希望能够帮助大家解决问题。手机QQ浏览器更换字体步骤一览1、打开手机，然后点击打开“QQ浏览器”（如图所示）。2、在QQ浏览器“我的”页面，点击右上角的“设置”标识（如图所示）。3、在设置中，点击进入“字体设置”（如图
