CSS初级项目如何制作悬停提示_tooltip伪元素::before::after显示信息

技术学院
2025-11-27 00:00:00

答案：通过CSS伪元素和定位实现悬停提示效果。先设置父元素相对定位，伪元素绝对定位并隐藏，悬停时结合opacity与visibility显示带箭头的提示框，利用transition实现平滑过渡，箭头通过border属性生成，整体无需JavaScript即可完成交互。

制作一个简单的悬停提示（tooltip）效果，可以使用纯 CSS 实现，无需 JavaScript。通过利用伪元素 ::before 或 ::after，我们可以在元素悬停时显示附加信息，比如说明文字或提示内容。

基本结构与原理

tooltip 的核心思路是：

给目标元素设置相对定位 position: relative
使用 ::before 或 ::after 伪元素创建提示框
默认隐藏提示（如 opacity: 0）
鼠标悬停时显示（opacity: 1，配合 visibility 或 transform 控制）

HTML 结构示例


  悬停我
  这是提示信息

CSS 样式实现

下面是完整的 CSS 实现方式：

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* 可选：加下划线提示可交互 */
  cursor: pointer;
}
.tooltiptext {
position: absolute;
bottom: 125%;        / 提示框在元素上方 /
left: 50%;
transform: translateX(-50%);
background-color: #333;
color: #fff;
padding: 5px 10px;
border-radius: 4px;
font-size: 14px;
white-space: nowrap;
/ 默认隐藏 /
opacity: 0;
visibility: hidden;
transition: opacity 0.3s, visibility 0.3s;
/ 使用 ::before 添加小箭头 /
}
.tooltiptext::before {
content: "";
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 5px solid transparent;
border-top-color: #333; / 箭头颜色 /
}
/ 悬停时显示提示 /
.tooltip:hover .tooltiptext {
opacity: 1;
visibility: visible;
}