Я вот сижу мучаюсь и не могу догнать.
Как сделать так, чтобы если допустим я взял в фокус любой из инпутов в поле ОТПРАВИТЕЛЬ, то сверху у первого круга срабатывал стиль .cart:hover .step:before{} ( то есть обводка круга ) .
Эти кружки - это 3 шага.
1 шаг - отправитель
2 шаг - введите сумму перевода
3 шаг - получатель
Следуя логике при фокусе инпута каждого из блоков , срабатывает стиль .cart:hover .step:before{} ( то есть обводка) соответсвутющего кружка ( шага ) .
Вот код :
<div class="steps">
<div class="step"></div>
<div class="step"></div>
<div class="step"></div>
</div>
<form>
<div class="grid_5">
<div class="cart">
<div class="cart-title">
Отправитель
</div>
<fieldset class="cart-number">
<legend>Номер карты:</legend>
<input class="number-input" type="text">
<input class="number-input" type="text">
<input class="number-input" type="text">
<input class="number-input" type="text">
</fieldset>
<fieldset class="expire">
<legend>Срок действия карты:</legend>
<input class="expire-number" type="text">
<input class="expire-number" type="text">
</fieldset>
<fieldset class="cvc">
<legend>CVC2 / CVV2 ?:</legend>
<input class="cvc-number" type="text">
</fieldset>
</div>
</div>
<div class="grid_2">
<div class="transfer">
<div class="transfer-title">
Введите сумму перевода
</div>
</div>
</div>
<div class="grid_5">
<div class="cart">
<div class="cart-title">
Получатель
</div>
<fieldset class="cart-number">
<legend>Номер карты:</legend>
<input class="number-input" type="text">
<input class="number-input" type="text">
<input class="number-input" type="text">
<input class="number-input" type="text">
</fieldset>
</div>
</div>
</form>
.step{
width: 48px;
height: 48px;
position: relative;
display: inline-block;
vertical-align: top;
margin: 50px 120px;
}
.step:nth-child(1){
background: url(../img/steps.png);
}
.step:nth-child(2){
background: url(../img/steps.png) -50px 0;
}
.step:nth-child(3){
background: url(../img/steps.png);
}
.step:nth-child(1):after,
.step:nth-child(2):after{
content: '';
position: absolute;
left: 47px;
top: 23px;
height: 1px;
width: 246px;
background: #ffdd2e;
}
.cart:hover .step:before{
content: '';
position: absolute;
left: -5px;
top: -5px;
border: 5px solid rgba(77, 67, 32, 1);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
width: 48px;
height: 48px;
}
