html鼠标移动到图片上，文字浮现在图片上面

HTML中，要实现鼠标移动到图片上时文字浮现在图片上方的效果，通常需要结合CSS和JavaScript或者利用HTML5的`<picture>`标签。以下是简单的方法：

1. **CSS悬停效果**:
使用CSS的`:hover`伪类可以创建悬停效果。首先，将文字（例如 `<span>` 元素）放在`<img>`元素下方，并设置初始隐藏。当鼠标悬停时，使用 `position: absolute; top: 0; left: 0;` 将文字定位在图片上。

   <div>
     <img src="image.jpg" alt="图片描述">
     <span class="tooltip">文字提示</span>
   </div>

   .tooltip {
     display: none;
     position: absolute;
     /* 添加其他样式，如颜色、字体等 */
   }
   img:hover + .tooltip {
     display: block;
   }

2. **JavaScript动态添加/删除**:
如果需要更复杂的功能，比如文字内容来自后台或者有动画效果，可以使用JavaScript事件监听器控制文字显示。当鼠标进入图片区域，显示文字，离开则隐藏。

   const tooltip = document.querySelector('.tooltip');
   const img = document.querySelector('img');

   img.addEventListener('mouseover', () => tooltip.style.display = 'block');
   img.addEventListener('mouseout', () => tooltip.style.display = 'none');