Как задать стиль вложенному элементу и заставить реагировать по hover?

Question

[boul]

Всем доброго дня!
Подскажите пожалуйста, как сделать, что бы при наведении на текст ссылки, вложенный элемент тоже реагировал?
Есть участок кода:

<a href="#" class="menu-link level-0"><div class="menu-item__inner">Текст ссылки
<div class="dropdown-icon">
	<div class="toggle-label state-closed is-visible">
		<span class="icon ion-chevron-right"></span>
	</div>

	<div class="toggle-label state-open">
		<span class="icon ion-chevron-down"></span>
	</div>
</div>

</div></a>

Текущее положение дел:
При наведении на текст ссылки, эффект hover подхватывает только текст ссылки, стрелка реагирует только при наведении на неё отдельно.
Вот что я хотел бы реализовать:
При наведении на текст ссылки, меняется цвет текста, цвет стрелки и направление стрелки вниз.
Ни как не могу сообразить как сделать.
Спасибо.

Answer 1

[Ankhena]

Разберитесь с селекторами.
Да и с семантикой тоже.

Вложенные селекторы:
a:hover span {красный}
Применит стили ко всем span, которые находятся внутри ссылки, когда на нее навели мышкой.

Итого:
.menu-link:hover .icon {меняйте что хотите}

Вот так, без лишних спанов и дивов для стрелок: https://jsfiddle.net/6k8qf35y/

Answer 2

[WapSter]

При наведении на текст ссылки, меняется цвет текста, цвет стрелки

Ankhena уже ответила.

направление стрелки вниз

использовать transform

Comments

[Ankhena]

Трансформ был в коде автора еще вчера.
И я даже пыталась объяснить, что стрелка это 1 псевдоэлемент, а не див с двумя другими дивами и двумя спанами

[WapSter]

Ankhena, мда посмотрел вопросы автора, я оказывается ему уже говорил об изучении селекторов еще 4 мая. Ну к 2025 может научиться верстать.