怎样在鼠标悬停时，使文字出现在图像旁边而不是在图像上？

要实现鼠标悬停时文字出现在图像旁边而不是在图像上，可以使用HTML和CSS来完成。

首先，需要一个包含图像和文字的HTML元素，例如一个<div>元素。然后使用CSS来控制文字的显示和隐藏。

以下是一个示例代码，演示如何实现这个效果：

HTML代码：

<div class="container">
  <img src="your-image.jpg" alt="Your Image">
  <p class="text">Your Text</p>
</div>

CSS代码：

.container {
  position: relative; /* 设置容器为相对定位 */
  display: inline-block; /* 设置容器为行内块元素，使文字在图像旁边显示 */
}

.text {
  display: none; /* 隐藏文字 */
  position: absolute; /* 设置文字为绝对定位 */
  top: 0;
  left: 100%; /* 将文字设置在图像的右侧 */
  padding: 10px;
  background-color: #fff;
  border: 1px solid #ccc;
}

.container:hover .text {
  display: block; /* 鼠标悬停时显示文字 */
}

在上面的代码中，我们创建了一个<div>元素作为容器，并在其中放置了一个图像和一个带有文本的<p>元素。通过给容器设置position: relative;，可以让文字相对于容器进行定位。

然后，通过给文字元素设置display: none;和position: absolute;属性，将其隐藏并相对于容器进行绝对定位。设置top: 0;和left: 100%;将文字设置在图像的右侧。

最后，通过使用.container:hover .text选择器，当鼠标悬停在容器上时，显示文字。

你可以将上述代码复制到一个HTML文件中，将your-image.jpg替换为你自己的图像路径，并在浏览器中查看效果。当鼠标悬停在图像上时，文字将出现在图像旁边。