首页html鼠标悬停多个图片出现文字

html鼠标悬停多个图片出现文字

时间: 2024-10-06 22:02:57 浏览: 57

HTML中，如果你想让鼠标悬停在多个图片上显示文字，可以使用`<img>`标签结合CSS样式来实现。这通常通过CSS伪类`:hover`来完成。下面是一个简单的例子： ```html <!DOCTYPE html> <html lang="zh"> <head> <style> img.hover-text { position: relative; display: inline-block; } .hover-text span { display: none; position: absolute; background-color: #000; color: #fff; padding: 5px 10px; bottom: 100%; left: 50%; transform: translateX(-50%); } img.hover-text:hover + span { display: block; } </style> </head> <body> <img src="image1.jpg" class="hover-text" alt="Image 1"> <span>这是图片1的文字描述</span>  <img src="image2.jpg" class="hover-text" alt="Image 2"> <span>这是图片2的文字描述</span> </body> </html> ``` 在这个例子中，给每个图片添加了`.hover-text`类，当鼠标悬停在图片上时，对应的`<span>`元素会从隐藏变为可见，显示在图片下方。

阅读全文