如何僅使用 HTML 和 CSS 在懸停圖像上顯示文字？

使用HTML 和CSS 在懸停時顯示文字

在網頁設計中，添加當使用者將滑鼠懸停在圖像上時出現的描述性文字可以增強視覺效果使用者體驗。此文字提供了有關圖像的寶貴信息，從而創建了互動式且引人入勝的瀏覽體驗。

僅使用 HTML 和 CSS 實作此效果相對簡單。以下是逐步執行此操作的方法：

1. 將圖像和懸停文字包裝在容器div 中：
   在圖像和文字周圍創建一個div將出現在懸停時。該 div 應該與圖像具有相同的高度和寬度。
2. 將懸停文字絕對定位在容器 div 內：
   使用 CSS，將懸停文字絕對定位在容器 div 內。將其位置設為絕對位置，將頂部、底部、左側和右側設為 0，以便在影像中正確對齊。最初，將其可見性設為隱藏，不透明度設為 0。
3. 調整懸停效果：
   最後，在容器 div 上使用懸停效果以顯示懸停文字。當使用者將滑鼠懸停在圖像上時，透過將其可見性設為可見並將不透明度設為 1，懸停文字應變得可見且完全不透明。

快速重置/

• {
  邊距：0;
  填充：0；
  邊框：0；
  }

/ 相關樣式/
.img__wrap {
位置：相對;
高度：200px;
寬度：257px;
}

.img__description {
位置：絕對
頂部：0; 🎜> 底部：0；
左：0；
右： 0;
背景：rgba(29, 106, 154, 0.72);
顏色：#fff;
可見性：隱藏；
不透明度：0 ;

/

過渡效果。不必要/ 轉換：不透明度0.2 秒，可見性0.2 秒；
}

.img__wrap:hover .img__description {

可見性：可見；
不見；
透明度：1；
}前>

< ;/div>

這種方法有效地將描述文字覆蓋到圖像上，當使用者將滑鼠懸停在圖像上時顯示文字不需要使用圖像精靈的圖像。

以上是如何僅使用 HTML 和 CSS 在懸停圖像上顯示文字？的詳細內容。更多資訊請關注PHP中文網其他相關文章！