Как задать свойство элементу с таким вложением (#2)?

Question

[Михаил Р.]

Всем привет!

Имеется:

<div class="class1">
  <div class="class2">123</div>
  <input type="text" class="class3">
</div>

Задача:
.class3:hover -> .class2 {color: red;}

Пробовал варианты, но если я правильно понял, они выбирают лишь элемент ПОСЛЕ, а не ДО:

.class3:hover + .class2 {color: red;}
.class3:hover ~ .class2 {color: red;}

Через js это реализовать не проблема, но может можно обойтись средствами css?

Спасибо!

UPD: если подробнее, то пытаюсь сделать подсветку иконки при hover input в bootstrap, а именно здесь:

<label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
  <div class="input-group mb-2 mr-sm-2 mb-sm-0">
    <div class="input-group-addon">@</div> // иконка
    <input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username"> // при hover -> меняем цвет иконки
  </div>

Answer 1

[Андрей Федоров]

https://codepen.io/aliencash/pen/veyGJL

Comments

[Михаил Р.]

как вариант, но в моем случае не до конца рабочий, ибо применяю bootstrap и там слетает верстка... немного дополнил вопрос

[Андрей Федоров]

Mike Ro, ну как обычно, применяем фреймфорки, а потом героически преодолеваем проблемы ими порожденные. )
https://codepen.io/aliencash/pen/VMmade
Но по-честному не понимаю, почему наведение на input должно менять иконку, а наведение на саму иконку - нет...

Answer 2

[Rid]

https://codepen.io/riddirect/pen/eGBxgK

Answer 3

[Exploding]

Ну так поменять местами их и готово.
А визуально позиционировать в css как там оно должно быть.

Comments

[Михаил Р.]

А визуально позиционировать в css как там оно должно быть.

не хотелось-бы отходить от правил верстки (в данном случае с помощью bootstrap)...
А варианта в css, как мы выбираем следующий (+/~), только на этот раз не следующий, а предыдущий или выше-стоящий элемент нет?

[Exploding]

Mike Ro, ну + же как раз и выбирает все сестринские элементы не зависимо от того раньше они или позже.

[Михаил Р.]

Exploding, разве? вроде он выбирает следующий по списку... в верх его вроде нельзя направить

[Kovalsky]

"+" - следующий соседний элемент,
"~" - все следующие соседние элементы

[Exploding]

Никита Полевой, Mike Ro, На, точно. Вы вдвоем правы. Давно не использовал его, вот и подзабыл.
Я только не пойму, почему не обрабатывать ховер на .input-group или вообще на label?