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

WBOY 转载: 2023-09-13 08:09:02 942浏览

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

我们在本文中要执行的任务是如何在将鼠标悬停在图像上时显示字体。让我们深入研究本文并快速了解 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='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中文网其它相关文章！

悬停显示字体 PHP课程 HTML视频教程 CSS视频 JS视频教程 Vue视频教程

声明：本文转载于：tutorialspoint，如有侵犯，请联系admin@php.cn删除

上一条：当文件准备好在HTML中开始播放时执行脚本吗？下一条：如何根据世界协调时间返回指定日期的星期几？