如何使用 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 宽）与图片相同。

.img__description {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

将描述信息定位在 div 的正中央。

visibility: hidden;
opacity: 0;

在悬停之前隐藏描述信息。

.img__wrap:hover .img__description {
  visibility: visible;
  opacity: 1;
}

当悬停 div 时，显示描述信息。

以上是如何使用 HTML 和 CSS 在图像悬停上显示文本？的详细内容。更多信息请关注PHP中文网其他相关文章！