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

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

在网页设计中，添加当用户将鼠标悬停在图像上时出现的描述性文本可以增强视觉效果用户体验。此文本提供了有关图像的宝贵信息，从而创建了交互式且引人入胜的浏览体验。

仅使用 HTML 和 CSS 实现此效果相对简单。以下是逐步执行此操作的方法：

1. 将图像和悬停文本包装在容器 div 中：
   在图像和文本周围创建一个 div将出现在悬停时。该 div 应该与图像具有相同的高度和宽度。
2. 将悬停文本绝对定位在容器 div 内：
   使用 CSS，将悬停文本绝对定位在容器 div 内。将其位置设置为绝对位置，将顶部、底部、左侧和右侧设置为 0，以便在图像中正确对齐。最初，将其可见性设置为隐藏，不透明度设置为 0。
3. 调整悬停效果：
   最后，在容器 div 上使用悬停效果以显示悬停文本。当用户将鼠标悬停在图像上时，通过将其可见性设置为可见并将不透明度设置为 1，悬停文本应变得可见且完全不透明。

 快速重置/

• {
  边距：0；
  填充：0；
  边框：0；
  }

/ 相关样式 /
.img__wrap {
位置：相对;
高度：200px;
宽度：257px;
}

.img__description {
位置：绝对;
顶部：0;
底部：0；
左：0；
右： 0;
背景：rgba(29, 106, 154, 0.72);
颜色：#fff;
可见性：隐藏；
不透明度：0;

/过渡效果。不必要 /
过渡：不透明度 0.2 秒，可见性 0.2 秒；
}

.img__wrap:hover .img__description {
可见性：可见；
不透明度：1；
}
<前>

< ;/div>

这种方法有效地将描述文本覆盖到图像上，当用户将鼠标悬停在图像上时显示文本不需要使用图像精灵的图像。

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