如何使用 HTML 和 CSS 在悬停图像上显示文本？

使用 HTML 和 CSS 在悬停时显示文本

为了在悬停时在图像上显示文本，您最初求助于图像精灵基于解决方案。然而，您现在寻求一种使用真实文本的更简洁的方法。

解决方案在于使用 div 元素作为图像和描述的包装器。该 div 应具有与图像相同的尺寸。通过操作 CSS，您可以确定将鼠标悬停在 div 上时描述的可见性。

实现此效果的简化代码片段：

.image-wrapper {
  position: relative;
  height: [Image height];
  width: [Image width];
}

.image-description {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: [Description background color];
  color: [Description text color];
  visibility: hidden;
  opacity: 0;
  transition: visibility .2s, opacity .2s;
}

.image-wrapper:hover .image-description {
  visibility: visible;
  opacity: 1;
}

在 HTML 中：

<div class="image-wrapper">
  <img  src="/static/imghwm/default1.png" data-src="image.jpg" class="lazy" alt="如何使用 HTML 和 CSS 在悬停图像上显示文本？" >
  <p class="image-description">This is the image description.</p>
</div>

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