使用HTML 和CSS 在懸停時顯示文字
在網頁設計中,添加當使用者將滑鼠懸停在圖像上時出現的描述性文字可以增強視覺效果使用者體驗。此文字提供了有關圖像的寶貴信息,從而創建了互動式且引人入勝的瀏覽體驗。
僅使用 HTML 和 CSS 實作此效果相對簡單。以下是逐步執行此操作的方法:
快速重置/
/ 相關樣式/
.img__wrap {
位置:相對;
高度:200px;
寬度:257px;
}
.img__description {
位置:絕對
頂部:0; 🎜> 底部:0;
左:0;
右: 0;
背景:rgba(29, 106, 154, 0.72);
顏色:#fff;
可見性:隱藏;
不透明度:0 ;
過渡效果。不必要/ 轉換:不透明度0.2 秒,可見性0.2 秒;
}
可見性:可見;
不見;
透明度:1;
}前>
< ;/div>
這種方法有效地將描述文字覆蓋到圖像上,當使用者將滑鼠懸停在圖像上時顯示文字不需要使用圖像精靈的圖像。
以上是如何僅使用 HTML 和 CSS 在懸停圖像上顯示文字?的詳細內容。更多資訊請關注PHP中文網其他相關文章!