html中，当鼠标悬停在文字上时，文字上方悬浮出图片，鼠标离开文字后，图片消失，请设计出样式

可以使用CSS的:hover选择器和position属性来实现文字悬浮图片的效果，以下是一个简单的样式设计：

HTML代码：

<p class="hover-text">这是一段文字</p>

CSS代码：

.hover-text {
  position: relative;
}

.hover-text:hover::before {
  content: "";
  display: block;
  position: absolute;
  top: -50px; /* 图片距离文字上方的距离 */
  left: 0;
  width: 100px; /* 图片宽度 */
  height: 50px; /* 图片高度 */
  background-image: url(图片地址); /* 图片路径 */
  background-size: cover;
}

解释：

- 使用position属性将文字容器设置为相对定位（position: relative），以便后续设置绝对定位的图片位置。
- 使用:hover选择器，当鼠标悬浮在文字上时，将伪元素::before设置为绝对定位，并在其上添加图片。
- 设置图片的位置、大小、路径等样式属性。由于图片是相对于伪元素定位的，所以top和left属性确定了图片相对于文字容器的位置。

注意：为了使图片在文字上方悬浮，需要将图片的top属性设置为负值。同时，为了让图片能够正常显示，需要将容器的高度设置为文字的高度加上图片的高度。