如何在滑鼠懸停在圖像上時顯示字體？-html教學-PHP中文網

首頁

web前端

html教學

如何在滑鼠懸停在圖像上時顯示字體？

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 13, 2023 am 08:09 AM

字體懸停顯示

如何在滑鼠懸停在圖像上時顯示字體？

我們在本文中要執行的任務是如何在將滑鼠懸停在圖像上時顯示字體。讓我們深入研究本文並快速了解 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/imghwm/default1.png"  data-src="https://www.tutorialspoint.com/static/images/logo-color.png?x-oss-process=image/resize,p_40"  class="lazy"    style="max-width:90%"  style="max-width:90%" alt="如何在滑鼠懸停在圖像上時顯示字體？" >
         <div>TP HTML LOGO</div>
      </div>
      <div class="img">
         <img  src="/static/imghwm/default1.png"  data-src="https://www.tutorialspoint.com/static/images/logo-color.png?x-oss-process=image/resize,p_40"  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/imghwm/default1.png"  data-src="https://www.tutorialspoint.com/static/images/logo-color.png?x-oss-process=image/resize,p_40"  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/imghwm/default1.png"  data-src="https://www.tutorialspoint.com/static/images/logo-color.png?x-oss-process=image/resize,p_40"  class="lazy" alt="如何在滑鼠懸停在圖像上時顯示字體？" >
         <p>Welcome to Tutorialspoint</p>
      </div>
   </body>
</html>

當腳本執行時，會彈出輸出窗口，使圖像在網頁上顯示為圓形。當使用者將滑鼠懸停在圖像上時，它將顯示文字。

以上是如何在滑鼠懸停在圖像上時顯示字體？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文轉載於：tutorialspoint。如有侵權，請聯絡admin@php.cn刪除

HTML：建立網頁的結構Apr 14, 2025 am 12:14 AM

HTML是構建網頁結構的基石。 1.HTML定義內容結構和語義，使用、、等標籤。 2.提供語義化標記，如、、等，提升SEO效果。 3.通過標籤實現用戶交互，需注意表單驗證。 4.使用、等高級元素結合JavaScript實現動態效果。 5.常見錯誤包括標籤未閉合和屬性值未加引號，需使用驗證工具。 6.優化策略包括減少HTTP請求、壓縮HTML、使用語義化標籤等。

從文本到網站：HTML的力量Apr 13, 2025 am 12:07 AM

HTML是一種用於構建網頁的語言，通過標籤和屬性定義網頁結構和內容。 1）HTML通過標籤組織文檔結構，如、。 2）瀏覽器解析HTML構建DOM並渲染網頁。 3）HTML5的新特性如、、增強了多媒體功能。 4）常見錯誤包括標籤未閉合和屬性值未加引號。 5）優化建議包括使用語義化標籤和減少文件大小。

了解HTML，CSS和JavaScript：初學者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML的角色：構建Web內容Apr 11, 2025 am 12:12 AM

HTML的作用是通過標籤和屬性定義網頁的結構和內容。 1.HTML通過到、等標籤組織內容，使其易於閱讀和理解。 2.使用語義化標籤如、等增強可訪問性和SEO。 3.優化HTML代碼可以提高網頁加載速度和用戶體驗。

HTML和代碼：仔細觀察術語Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent，而“代碼” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1）htmldefineswebpagertuctureduseTags.2）“代碼”代碼“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract