Пытаюсь сделать "переключатель" из двух стрелок. При нажатии на любую из них она меняет цвет на противоположный, тоже самое происходит со второй. (Реализуется с помощью спрайта и background-position). Сейчас работает только смена позиции фона у той стрелки на которую нажал, вторая не меняется. Подскажите, где я накосячил ?
.arrow {
width: 38px;
height: 28px;
background-image: url("../img/spritesheet.png");
background-repeat: no-repeat;
}
.left {
background-position: -5px -5px;
}
.left:focus {
background-position: -52px -5px;
}
.left:focus .right {
background-position: -101px -5px;
}
.right {
background-position: -149px -5px;
margin-left: 40px;
}
<a href="##" class="arrow left"></a>
<a href="##" class="arrow right"></a>