我有一个步进器,其箭头从第 1 阶段指向第 5 阶段。当我将鼠标移到当前阶段时,我想更改当前阶段的上一个和下一个箭头的颜色。
第一个问题是我不知道如何使用 css 选择器获取箭头(伪元素)并使它们与 span 元素同时改变颜色。第二个问题是当前阶段的箭头是红色的,下一个箭头不能形成平行四边形..看起来不太好
.steps {
padding-left: 0;
list-style: none;
font-size: 13px;
line-height: 1;
margin: 0px auto;
border-radius: 3px;
}
.steps strong {
font-size: 14px;
display: block;
line-height: 1.3;
}
.steps>li {
position: relative;
display: block;
/* border: 1px solid #ddd; */
padding: 12px 20px 8px 50px;
width: 20%;
height: 58px;
}
@media (min-width: 768px) {
.steps>li {
float: left;
}
.steps .past {
color: #777;
background: #f4f4f4;
}
.steps .present {
color: #fff;
background-color: #c32611;
}
.steps .future {
color: #777;
background: #f4f4f4;
}
.steps strong {}
.steps li>span:after,
.steps li>span:before {
content: "";
display: block;
width: 0px;
height: 0px;
position: absolute;
top: 0;
left: 0;
border: solid transparent;
border-left-color: #f0f0f0;
border-width: 29px 30px;
}
.steps li>span:after {
top: -5px;
z-index: 1;
border-left-color: white;
border-width: 34px;
}
.steps li>span:before {
z-index: 2;
}
.steps li.past+li>span:before {
border-left-color: #f4f4f4;
}
.steps li.present+li>span:before {
border-left-color: #c32611;
}
.steps li.future+li>span:before {
border-left-color: #f4f4f4;
}
.steps li:first-child>span:after,
.steps li:first-child>span:before {
display: none;
}
/* Arrows at start and end */
.steps li:first-child i,
.steps li:last-child i {
display: block;
position: absolute;
top: 0;
left: 0;
border: solid transparent;
border-left-color: white;
border-width: 30px;
}
.steps li:last-child i {
left: auto;
right: -30px;
border-left-color: transparent;
border-top-color: white;
border-bottom-color: white;
}
<ul class="steps">
<!--past present future-->
<li class="past" onMouseOver="this.style.background='#e3e3e3'" onMouseOut="this.style.background='transparent'" style="cursor: pointer;">
<span wicket:id="stage31"><strong>Stage 1</strong>Start</span><i></i></li>
<li class="past" onMouseOver="this.style.background='#e3e3e3'" onMouseOut="this.style.background='transparent'" style="cursor: pointer;">
<span wicket:id="stage32"><strong>Stage 2</strong>This is stage 2</span><i></i></li>
<li class="present"><span><strong>Stage 3</strong>This is stage 3</span><i></i></li>
<li class="future" onMouseOver="this.style.background='#e3e3e3'" onMouseOut="this.style.background='transparent'" style="cursor: pointer;">
<span wicket:id="stage34"><strong>Stage 4</strong>This is stage 4</span><i></i></li>
<li class="future"><span><strong>Stage 5</strong>Finish</span><i></i></li>
</ul>