如何在鼠标悬停在图像上时显示字体？-html教程-PHP中文网

如何在鼠标悬停在图像上时显示字体？

WBOY

发布： 2023-09-13 08:09:02

转载

6762人浏览过

如何在鼠标悬停在图像上时显示字体？

我们在本文中要执行的任务是如何在将鼠标悬停在图像上时显示字体。让我们深入研究本文并快速了解 HTML 中的悬停和鼠标悬停。

HTML 中的 onmouseover 事件在鼠标指针触摸某个元素时触发。当鼠标指针离开某个元素时，会发生一个名为 onmouseout 的事件。

当用户使用指点设备与元素交互时，:hover CSS 伪类会匹配，但它并不总是被激活。通常，当用户将光标悬停在元素（鼠标指针）上时，它会被激活。

语法

以下是悬停的语法 -

:hover

登录后复制

为了更好地理解将鼠标悬停在图像上时显示字体，让我们看看以下示例。

示例

在下面的示例中，当鼠标悬停在图像上时，我们使字体可见。

Robovision AI

一个强大的视觉AI管理平台

查看详情

<!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://www.tutorialspoint.com/html/images/html-mini-logo.jpg' width='100%' height='100%'>
         <div>TP HTML LOGO</div>
      </div>
      <div class="img">
         <img src='https://www.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://www.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://www.tutorialspoint.com/static/images/logo-color.png">
         <p>Welcome to Tutorialspoint</p>
      </div>
   </body>
</html>

登录后复制

当脚本执行时，会弹出输出窗口，使图像在网页上显示为圆形。当用户将鼠标悬停在图像上时，它将显示文本。

以上就是如何在鼠标悬停在图像上时显示字体？的详细内容，更多请关注php中文网其它相关文章！