CSS初级项目如何制作悬停提示_tooltip伪元素::before::after显示信息-css教程-PHP中文网

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

P粉602998670

发布： 2025-11-27 15:25:10

原创

180人浏览过

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

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

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

基本结构与原理

tooltip 的核心思路是：

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

HTML 结构示例

<div class="tooltip">
  悬停我
  <span class="tooltiptext">这是提示信息</span>
</div>

登录后复制

CSS 样式实现

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

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

登录后复制