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

如何在圖片停留時展示文字？

展示圖片懸停時的描述資訊是常見需求。本文將介紹如何使用 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中文網其他相關文章！