Question

我有一个使用以下HTML代码的网页：

<ol class="progress-bar">
<li class="progress-bar__steps not-current">
    <span class="progress-bar__steps--numbers"></span>
    <span class="progress-bar__steps--text">option 1</span>
</li>
<li class="progress-bar__steps not-current">
    <span class="progress-bar__steps--numbers"></span>
    <span class="progress-bar__steps--text">option 2</span>
</li>
<li class="progress-bar__steps current">
    <span class="progress-bar__steps--numbers"></span>
    <span class="progress-bar__steps--text">option 3</span>
</li>
<li class="progress-bar__steps not-current">
    <span class="progress-bar__steps--numbers"></span>
    <span class="progress-bar__steps--text">option 4</span>
</li>
</ol>

并使用此CSS代码：

.progress-bar {
  list-style: none;
  overflow: hidden;
  font: 14px Helvetica;
  font-weight: 600;
  display: flex;
  counter-reset: li;
  padding: 0px;
}
.progress-bar__steps:hover{
    border: 2px solid #1779ba;
    background:yellow;
}

.progress-bar__steps {
  background: #ddd;
  color: #666;
  width: 25%;
  position: relative;
  cursor: default;
  list-style-image: none;
  list-style-type: none;
  padding: 20px 5px;
  text-align: center;
  border: 2px solid transparent;
}
@media screen and (min-width: 800px) {
  .progress-bar__steps {
    padding: 20px 0 20px 65px;
    text-align: left;
  }
}
@media screen and (min-width: 800px) {
  .progress-bar__steps:first-child {
    padding: 20px 0 20px 30px;
  }
}
@media screen and (min-width: 800px) {
  .progress-bar__steps:after {
    border-bottom: 50px solid transparent;
    border-top: 50px solid transparent;
    content: " ";
    display: block;
    height: 0;
    left: 100%;
    margin-top: -50px;
    position: absolute;
    top: 50%;
    width: 0;
    border-left: 30px solid #ddd;
    z-index: 2;
  }

}
@media screen and (min-width: 800px) {
  .progress-bar__steps:before {
    border-bottom: 50px solid transparent;
    border-top: 50px solid transparent;
    content: " ";
    display: block;
    height: 0;
    left: 100%;
    margin-top: -50px;
    position: absolute;
    top: 50%;
    width: 0;
    border-left: 30px solid #fff;
    z-index: 1;
    margin-left: 5px;
  }
}
.progress-bar .current {
  background: #1779ba;
  color: #fff;
}

.progress-bar .not-current {
    cursor:pointer;
}

.progress-bar .current:after {
  border-left: 30px solid #1779ba;
}

@media screen and (min-width: 800px) {
  .progress-bar__steps--numbers:before {
    content: counter(li) " ";
    counter-increment: li;
    margin-right: 15px;
    background: white;
    border: 1px solid transparent;
    border-radius: 50%;
    display: inline-block;
    height: 20px;
    line-height: 20px;
    text-align: center;
    width: 20px;
  }
}
.current .progress-bar__steps--numbers:before {
  background: white;
  color: #1779ba;
}

代码在所有主流浏览器，Safari，Chrome，Firefox，Internet Explorer中都能正常运行，除了一件事，边框悬停效果不能完全正常工作。

为了更好地理解这个问题，我已经设置了一个工作演示。你可以在这个位置找到工作演示： https://codepen.io/anon/pen/OZRYPV

Answer 1

我调整了一下你的代码，以显示可以在那里完成的工作：https://codepen.io/anon/pen/GdjaGZ。

@media screen and (min-width: 800px) {
  .progress-bar__steps:after {
    border-bottom: 31px solid transparent;
    border-top: 31px solid transparent;
    content: " ";
    display: block;
    height: 0;
    right: -19px;
    margin-top: -31px;
    position: absolute;
    top: 50%;
    width: 0;
    border-left: 19px solid #ddd;
    z-index: 2;
  }
}
@media screen and (min-width: 800px) {
  .progress-bar__steps:before {
    border-bottom: 33px solid transparent;
    border-top: 33px solid transparent;
    content: " ";
    display: block;
    height: 0;
    right: -22px;
    margin-top: -33px;
    position: absolute;
    top: 50%;
    width: 0;
    border-left: 20px solid #fff;
    z-index: 1;
    margin-left: 0;
  }
  .progress-bar__steps:hover:after {
    border-left-color: yellow;
  }
  .progress-bar__steps:hover:before {
    border-left-color: #1779ba;
  }
}

形状的问题在于，您无法在那里轻松创建边框。在我看来，简单的解决方案是使用stroke所需形状的SVG，因为它会使它看起来很好，并且它更容易定位它。您可以使用任何矢量编辑器创建路径。甚至应该是在线的。

Css边境悬停效果问题

1 个答案: