要在鼠标悬停时让一个 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助手提供，问题来源于学员提问
![[pgsql]
host=127.0.0.1
port=5432
database=emm_manager
user=uniemm
passwd=OPwdVGWjHT8nQmQ7BEav8g==
[redis]
host=10.19.83.70,10.19.83.70,10.19.83.70,10.19.83.70,10.19.83.70,10.19.83.70
port=7001,7002,7003,7004,7005,7006
passwd=8xNnDa3XamGiMw==
mode=...](https://linuxcpp.0voice.com/zb_users/upload/2023/05/202305162237121215388.png)
![sed -i "s/${dbconf_map["java_addr"]}/${shardingsphere_proxy_vip}:${shardingsphere_proxy_port}/g" $java_conf_path 双引号是否会错乱？](https://linuxcpp.0voice.com/zb_users/upload/2023/05/202305162214216277121.png)
