要在鼠标悬停时让一个 div 显示提示文字，你可以使用 HTML 和 CSS，配合一些 JavaScript。以下是一个简单的示例：
HTML
<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>鼠标悬停提示</title><link rel="stylesheet" href="styles.css"></head><body><div class="hover-container">将鼠标放在这里<span class="tooltip">这是提示文字!</span></div><script src="script.js"></script></body></html>
CSS (styles.css)
.hover-container {position: relative;display: inline-block;padding: 10px;border: 1px solid #ccc;}.tooltip {visibility: hidden;width: 120px;background-color: black;color: #fff;text-align: center;border-radius: 6px;position: absolute;z-index: 1;bottom: 100%; /* 在 div 上方 */left: 50%;margin-left: -60px; /* 调整位置 */opacity: 0; /* 初始透明度 */transition: opacity 0.3s; /* 渐变效果 */}.hover-container:hover .tooltip {visibility: visible; /* 鼠标悬停时可见 */opacity: 1; /* 鼠标悬停时不透明 */}
JavaScript (script.js)
对于这个简单的示例，实际上并不需要额外的 JavaScript，因为我们可以通过 CSS 的 :hover 来实现。不过，如果你想添加更复杂的功能，可以用 JavaScript 来控制。
功能说明：
- 当用户将鼠标悬停在 “将鼠标放在这里” 的
div上时，会出现黑色背景的提示文字 “这是提示文字!“。 - 提示文字通过 CSS 控制显示和隐藏，不需要任何额外的 JavaScript。
你只需将以上代码粘贴到对应的文件中，就可以看到效果。
内容由零声教学AI助手提供，问题来源于学员提问
