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

百变鹏仔 3个月前 (09-21) #HTML

文章标签鼠标

我们在本文中要执行的任务是如何在将鼠标悬停在图像上时显示字体。让我们深入研究本文并快速了解 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'    style="max-width:90%"  style="max-width:90%" alt="如何在鼠标悬停在图像上时显示字体？" >         <div>TP HTML LOGO</div>      </div>      <div class="img">         <img  src='https://www.tutorialspoint.com/java/images/java-mini-logo.jpg'    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=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="https://www.tutorialspoint.com/static/images/logo-color.png" alt="如何在鼠标悬停在图像上时显示字体？" >         <p>Welcome to Tutorialspoint</p>      </div>   </body></html>

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

文章推荐

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

语法

示例

示例

示例

html代码是什么

值得一学的6个前端HTML+CSS特效

html怎么设置字体

怎么隐藏html标签

html怎么设置编码utf8