@boul

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

Всем доброго дня!
Подскажите пожалуйста, как сделать, что бы при наведении на текст ссылки, вложенный элемент тоже реагировал?
Есть участок кода:
<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 подхватывает только текст ссылки, стрелка реагирует только при наведении на неё отдельно.
Вот что я хотел бы реализовать:
При наведении на текст ссылки, меняется цвет текста, цвет стрелки и направление стрелки вниз.
Ни как не могу сообразить как сделать.
Спасибо.
  • Вопрос задан
  • 71 просмотр
Решения вопроса 2
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
Разберитесь с селекторами.
Да и с семантикой тоже.

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

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

Вот так, без лишних спанов и дивов для стрелок: https://jsfiddle.net/6k8qf35y/
Ответ написан
wapster92
@wapster92 Куратор тега CSS
При наведении на текст ссылки, меняется цвет текста, цвет стрелки
Ankhena уже ответила.
направление стрелки вниз
использовать transform
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы