首页给你一张图片，当鼠标悬停在图片上时，就会出现气泡文本，鼠标移开时，文本消失

给你一张图片，当鼠标悬停在图片上时，就会出现气泡文本，鼠标移开时，文本消失

时间: 2024-03-01 07:56:20 浏览: 15

好的，你可以在HTML中使用以下代码来实现这个效果： ```html <!DOCTYPE html> <html> <head> <title>Hover Text Example</title> <style> .container { position: relative; display: inline-block; } .container:hover .text { visibility: visible; } .text { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); background-color: #333; color: #fff; padding: 5px; border-radius: 5px; visibility: hidden; } </style> </head> <body> <div class="container"> <img src="your-image.jpg" alt="Your Image"> <div class="text">Your hover text goes here</div> </div> </body> </html> ``` 在这个示例中，我们创建了一个包含图像和文本的容器，并使用CSS设置了文本的样式和位置。当鼠标悬停在容器上时，我们使用:hover选择器来显示文本。这样，当鼠标移开容器时，文本就会消失。