CSS-селекторы с шаговыми стрелками
У меня есть степпер со стрелкой, указывающей вправо от этапа 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>Любой, кто запускает фрагмент кода - есть медиа-запросы, из-за которых результат выглядит иначе. Вам нужно будет просмотреть его на всю страницу, чтобы получить правильный рендеринг.
Когда я реализовывал такой степпер, я всегда помещал стрелку на свой собственный шаг, у вас он есть на следующем шаге, который является целевым, но, на мой взгляд, не идеальным. Когда у вас есть стрелка на своем собственном шаге, вы просто наводите на нее курсор. Если вы хотите изменить посещенные шаги, вам понадобится js, чтобы добавить класс к посещенным элементам и таким образом изменить цвета. Вот пример шагового двигателя lexus.ca/lexus/en/build-price/is
Я пробовал это правило .steps li:hover + li > span:before { border-left-color:#e3e3e3; } но стрелка текущего этапа меняет цвет с красного на серый. Как я могу выбрать все стрелки, ожидаемые для текущего? или переопределить правило, чтобы текущая стрелка оставалась красной.
Обратите внимание, что вы, вероятно, можете использовать Фрагменты стека для добавления исполняемого кода здесь, в Stack Overflow, что поможет ответчикам. Думаю, первое, что нужно попробовать, это псевдокласс
:hover.