Расширить действие svg-иконки для псевдокласса hover

Question

Нужно чтобы при наведении курсора на ссылку менялся фон и сам цвет иконки. С фоном проблем не возникло, с иконкой выходит так, что она цвет меняет только конкретно когда на неё навожу, а не в любом месте ссылки. То есть сначала у меня появляется фон, а потом когда дотягиваешь курсор до самой иконки, уже меняется её цвет. Как исправить, чтобы иконка сразу меняла цвет при наведении в любую область ссылки? Весь задействованный код прилагается.

.list-social {
  display: flex;
}

.social-link {
  display: block;
  padding: 12px;
  width: 44px;
  height: 44px;
}

.social-icon {
  width: 20px;
  height: 20px;
  fill: var(--icon-color);
}

.social-link:hover {
  background-color: var(--accent-color);
  border-radius: 50%;
}

.social-icon:hover {
  fill: var(--white);
}

<a href="" class="social-link">
  <svg class="social-icon">
    <use href="./images/icons/symbol-defs.svg#icon-icon-instagram1"></use>
  </svg>
</a>

Answer 1

Основная проблема в коде, у вас :hover повешан на .social-link и .social-icon, а вы хотите менять цвет при наведении на .social-link <- тут уже подсказка.

.social-link:hover {
  background-color: var(--accent-color);
  border-radius: 50%;
}

.social-link:hover .social-icon {
  fill: var(--white);
}

БЛОГ НА HUSL

Расширить действие svg-иконки для псевдокласса hover

Ответы (1 шт):