Сложный hover эффект?

Question

[Alibek Kulseitov]

Я вот сижу мучаюсь и не могу догнать.
Как сделать так, чтобы если допустим я взял в фокус любой из инпутов в поле ОТПРАВИТЕЛЬ, то сверху у первого круга срабатывал стиль .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;
}

Answer 1

[Lumore]

codepen.io/anon/pen/GJMBrE

Comments

[Alibek Kulseitov]

круто) а без JS можно реализовать?

Answer 2

[l2p]

Можно сделать и без JS, но для этого придется помучиться с вложенностью классов. То есть кружок должен быть внутри input-a, придется искусственно двигать, чтобы воспользоваться: .input_class:focus .drugoy_class