Как при hover изменить цвет тексту и svg?

Question

Нужно при наведении поменять цвет текста ссылки и свг которая заинлайнена в html. Как это можно сделать? Или же сделать свг псевдоэлементом? Подскажите варианты, заранее спасибо.

<a href="https://htmlacademy.ru/intensive/adaptive" class="footer__link-academy">Разработано в HTML Academy
          <svg class="footer__academy-logo" width="12" height="16" viewBox="0 0 12 16" fill="none"
            xmlns="http://www.w3.org/2000/svg">
            <path
              d="M11.2151 5.75392L5.97184 2.49957V2.49875L5.97121 2.49916L5.97058 2.49875V2.49957L0.784854 5.75013V1.40658L6.00008 0.830884L11.2151 1.40658V5.75392ZM11.211 6.32987L9.12557 7.62344L5.98451 5.65607L5.97935 6.22863L8.66414 7.9096L8.20107 8.19683L5.98451 6.80853L5.97935 7.3811L7.72892 8.47648L7.31607 8.76717L7.30606 8.77351L5.98451 7.95383L5.97935 8.52631L6.8465 9.06404L5.96315 9.62244L0.796198 6.3886L5.97058 3.1139V3.11448L11.211 6.32987ZM11.2151 11.7713L6 15.0384L0.784854 11.7713V7.02542L5.97763 10.2796L5.98631 10.8693L2.42396 8.63702L2.41871 9.20959L5.99523 11.4728L6.00407 12.0782L2.42873 9.83883L2.42356 10.4113L6 12.6745L9.60624 10.4026V7.95712L11.2151 6.94552V11.7713ZM5.99984 -3.17891e-07L0 0.662267V12.2411L6 16L12 12.2411V0.662267L5.99984 -3.17891e-07Z"
              fill="#BDBDBD" />
          </svg>
        </a>

Answer 1

Для изменения цвета svg используется css свойство fill. В вашем случае css должен выглядеть так:

a:hover {
 color: green;
}
a:hover > svg path {
 fill: red;
}

Где > - указатель на прямых потомков элемента.

БЛОГ НА HUSL

Как при hover изменить цвет тексту и svg?

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