如何在圖片停留時展示文字？
展示圖片懸停時的描述資訊是常見需求。本文將介紹如何使用 HTML 和 CSS 優雅地實現這項功能。
問題
許多開發者會使用圖片精靈和懸停來實現這項功能。然而，這種方法不夠理想，而且難以製作出精準的效果。因此，本文將展示如何使用真正的文本，而不是圖片。
解決方案
實現這項功能很簡單。只需將圖片和懸停描述訊息包裹在一個與圖片尺寸相同的 div 中。然後，使用 CSS 在懸停該 div 時顯示描述資訊。
程式碼範例
以下是使用 HTML 和 CSS實現這一功能的代碼示例：
HTML：
<div class="img__wrap"> <img class="img__img" src="image.jpg" /> <p class="img__description">This image looks super neat.</p> </div>
CSS：
/* quick reset */
* {
margin: 0;
padding: 0;
border: 0;
}
/* relevant styles */
.img__wrap {
position: relative;
height: 200px;
width: 257px;
}
.img__description {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(29, 106, 154, 0.72);
color: #fff;
visibility: hidden;
opacity: 0;
/* transition effect. not necessary */
transition: opacity .2s, visibility .2s;
}
.img__wrap:hover .img__description {
visibility: visible;
opacity: 1;
}在上面的例子中："
<div class="img__wrap">
將圖片和描述訊息包裹在一個div 中，這個div 的尺寸（200px 高，257px 寬）與圖片相同。隱藏描述訊息。時，顯示描述資訊。
以上是如何使用 HTML 和 CSS 在圖像懸停上顯示文字？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
