使用CSS为轮播导航点添加悬停显示文本问题求助

原代码的问题 #

• 选择器层级错误：.dot-0 ul li.active:before 是找 .dot-0 下的 ul 里的 li，但实际结构是 ul 下的 li 带 .dot-0 类，选择器逻辑写反了
• 缺少悬停触发逻辑：原代码没加 :hover 伪类，无法实现“仅鼠标悬停时显示文本”的需求
• 伪元素定位无效：margin-bottom 对未设置定位的伪元素不起作用，没法把文本放到导航点上方

修正后的代码 #

HTML（补充多导航点示例） #

<ul class="slideshow-dots">
  <li class="dot dot-0 active"></li>
  <li class="dot dot-1"></li>
  <li class="dot dot-2"></li>
</ul>

CSS #

/* 导航点容器基础样式 */
.slideshow-dots {
  position: relative;
  list-style: none;
  padding: 0;
  display: flex;
  gap: 10px;
  justify-content: center;
}

/* 单个导航点样式 */
.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #999;
  cursor: pointer;
  position: relative; /* 让伪元素相对于当前导航点定位 */
}

/* 悬停时显示文本的通用样式 */
.dot:hover:before {
  content: '';
  position: absolute;
  bottom: 120%; /* 把文本放在导航点上方 */
  left: 50%;
  transform: translateX(-50%); /* 文本水平居中 */
  color: #FFF;
  font-size: 16px;
  font-weight: 600;
  padding: 5px 10px;
  background: rgba(0,0,0,0.8);
  border-radius: 4px;
  z-index: 9;
}

/* 给每个导航点设置专属悬停文本 */
.dot-0:hover:before {
  content: '早上好';
}

.dot-1:hover:before {
  content: '下午好';
}

.dot-2:hover:before {
  content: '晚上好';
}

/* 激活状态导航点样式（可选） */
.dot.active {
  background: #FFF;
}

关键说明 #

• 给每个导航点设置 position: relative，确保伪元素能精准定位在它的上方
• 通过 :hover:before 触发文本显示，用 bottom 和 transform 调整文本位置并居中
• 每个带编号的导航点类单独设置 content，实现不同的悬停文本内容
• 给伪元素添加背景和内边距，提升文本可读性

内容的提问来源于stack exchange，提问作者user18943036