img鼠标悬停显示文字

要实现图片悬停显示文字的效果，可以使用HTML的`<img>`标签和CSS的`:hover`伪类。具体步骤如下：

1. 在HTML中，将要显示的图片和文字都包含在一个容器元素中，例如一个`<div>`元素或`<a>`元素。

2. 在容器元素中，使用`<img>`标签来插入要显示的图片，例如：

<div class="image-container">
  <img src="example.jpg" alt="Example image">
</div>

3. 在容器元素中，使用CSS来设置鼠标悬停时要显示的文字，例如：

.image-container:hover::after {
  content: "This is an example image";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background-color: white;
  padding: 10px;
  border: 1px solid black;
}

这段CSS代码中，使用了`:hover`伪类来指定鼠标悬停时的样式效果。使用`::after`伪元素来插入要显示的文字，并设置`display: block;`以使其显示在图片下方。使用`position: absolute;`、`top: 0;`和`left: 0;`来将文字定位在图片的左上角，使用`background-color`、`padding`和`border`来设置文字的样式。

完整的示例代码如下：

<div class="image-container">
  <img src="example.jpg" alt="Example image">
  <span class="image-text">This is an example image</span>
</div>

<style>
.image-container {
  position: relative;
  display: inline-block;
}

.image-text {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  background-color: white;
  padding: 10px;
  border: 1px solid black;
}

.image-container:hover .image-text {
  display: block;
}
</style>

这个示例中，使用了一个`<span>`元素来插入要显示的文字，并使用CSS来设置文字的样式。使用`position: relative;`和`display: inline-block;`来使容器元素相对定位，并且可以让多个图片和文字容器元素排列在一行中。使用`.image-container:hover .image-text`来指定鼠标悬停时要显示文字的样式。