Question

我一直试图设计这个3圈进度条。它应该看起来像这样： https://postimg.org/image/mhnp2krrn/

绿色中心圆圈在悬停和点击时可见。然后当进度移动时，条形如下所示： https://postimg.org/image/kokse96kz/

我被卡住了，我的圆圈代码基本上只是三个圆圈，悬停效果将它们变为绿色。

这是我的代码，甚至不会出现。我试图让它看起来很红。线在那里，但不可见。我找不到任何阻止我看到它的CSS样式。定位不相关，此代码是从另一个需要在该位置显示的项目中获取的。

.step-progress-step .btn-circle {
  background: #f1f1f2;
  border-color: #b3b3b3;
  width: 25px;
  height: 25px;
  text-align: center;
  padding: 6px 0px;
  font-size: 14px;
  line-height: 1.8;
  border-radius: 20px;
  display: inline-block;
}


.step-progress-step .btn-circle:hover {
  background: #01c966;
}

我的HTML：

.step-progress-row:before {
  top: 19px;
  left: 60px;
  bottom: 0;
  position: absolute;
  content: " ";
  width: 75%;
  height: 1px;
  color: red;
  z-index: -2;
  transition: all 0.8s ease;
}

如果有人能帮助我，那就太棒了。

Answer 1

尝试使用background-color: red;而不是color: red;作为.step-progress-row：之前我认为你会看到你的行。见这里：http://codepen.io/anon/pen/xEgwgp

3个圆圈的样式进度条与悬停

1 个答案: