CSS边框悬停效果问题求助：进度条HTML代码相关咨询

嘿Miguel，针对你这个进度条的边框悬停效果问题，我结合你提供的HTML结构，整理了几个实用的解决方案，帮你快速实现想要的交互效果：

方案1：全局项悬停边框（无移位动画） #

这个方案会给整个步骤项添加悬停边框，同时通过初始透明边框避免悬停时元素突然移位：

首先先给进度条和步骤项设置基础样式：

/* 重置列表默认样式 */
.progress-bar {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 2rem;
}

/* 步骤项基础布局 */
.progress-bar__steps {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.5rem;
  /* 初始透明边框，防止悬停时元素移位 */
  border: 2px solid transparent;
  /* 添加平滑过渡动画 */
  transition: all 0.3s ease;
  cursor: pointer;
}

/* 数字圆圈基础样式 */
.progress-bar__steps--numbers {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
}

然后添加悬停效果的CSS：

/* 非当前步骤的悬停边框 */
.progress-bar__steps.not-current:hover {
  border-color: #2563eb; /* 可替换成你需要的颜色 */
  border-radius: 0.5rem; /* 可选：添加圆角优化视觉 */
}

/* 可选：当前激活步骤的特殊边框样式 */
.progress-bar__steps.current {
  border-color: #16a34a;
  border-radius: 0.5rem;
}

方案2：仅数字圆圈悬停边框 #

如果只需要给数字圆圈部分添加悬停边框，可以这样写：

.progress-bar__steps.not-current:hover .progress-bar__steps--numbers {
  border: 2px solid #2563eb;
  background-color: #eff6ff; /* 可选：同步改变背景色增强视觉反馈 */
}

方案3：底部边框悬停效果 #

如果想要更简约的底部边框悬停效果，避免整个边框的包围感：

.progress-bar__steps.not-current {
  position: relative;
  padding-bottom: 0.5rem;
}

.progress-bar__steps.not-current:hover::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #2563eb;
}

几个关键注意点： #

• 一定要给元素添加transition属性，让悬停的进出状态都有平滑动画，避免生硬切换
• 如果你的进度条有激活状态（比如后续会添加current类），记得单独给激活状态设置样式，区分开悬停和已完成/当前步骤
• 边框颜色、宽度、样式（比如虚线dashed）都可以根据你的设计需求自由调整

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