首页并且当鼠标放到图片上会在图边上显示详细信息

并且当鼠标放到图片上会在图边上显示详细信息

时间: 2024-12-16 08:30:09 浏览: 21

要在图片上添加悬停提示显示详细信息，可以利用HTML的`title`属性，配合CSS的`:hover`伪类。这是一个基础的例子： ```html <!DOCTYPE html> <html lang="zh"> <head> <style> img:hover { /* 当鼠标悬停在图片上时，显示工具提示 */ cursor: help; /* 可以设置边框或者阴影效果 */ box-shadow: 0 0 5px rgba(0, 0, 0, 0.7); /* 根据需要调整提示框的位置 */ position: relative; top: -20px; left: 50%; /* 使用left:50%将提示移动到图片中心 */ transform: translateX(-50%); } img.tooltip { /* 添加一个隐藏的标题标签，内容将在鼠标悬停时显示 */ position: relative; display: inline-block; overflow: hidden; } .tooltip .tooltip-text { /* 提示文本容器 */ white-space: nowrap; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background-color: #fff; padding: 5px; border: 1px solid #000; visibility: hidden; opacity: 0; transition: all 0.3s ease-in-out; } img.tooltip:hover .tooltip-text { visibility: visible; opacity: 1; } </style> </head> <body> <img src="your-image.jpg" alt="Image Description" class="tooltip" title="这是图片详细描述，当鼠标移到这里会显示">  </body> </html> ``` 在这个例子中，当鼠标悬停在图片上时，图片周围会出现一个带有提示文字的边框。点击图片外的地方，提示信息会消失。

阅读全文