Как на SVG в теге li поставить другой цвет при hover на li или a?

Question

[Даниил Конев]

Как на SVG в теге li поставить другой цвет при hover на li или a ?

Структура html скелета:

<ul class="h_nav_list">
    
       
        <li>
			<!--'start_frame_cache_compare'-->
<a class="compare c-icon-count" href="/catalog/compare/">
	<svg class="svg-icon c-icon-count__icon"><use xlink:href="#svg-24_compare"></use></svg>
	<span class="js-compare-prod-count c-icon-count__quantity">0</span>
</a>

<!--'end_frame_cache_compare'-->		</li>
        

    </ul>

Ставлю такой стиль:
.h_nav_list li a svg:hover {fill: #9167C9;}

Но цвет меняется только при наведении на саму SVG, а нужно при наведении на li или a... Как сделать?

К примеру при наведении на пункт меню, текст меняет цвет, все хорошо, но нужно, что бы svg меняло цвет при наведении на любую область li a
.h_nav_list li a:hover

Пример, в меню справа на сайте: https://fabrika-decora.weblh-test.ru/

Comments

[Сергей Сергей]

.h_nav_list li a:hover svg {}?

[Ankhena]

В списке не может быть ссылок, предварительно не вложенных в li. Поэтому, можно уменьшить вложенность селектора.
.h_nav_list a:hover svg {}

Лучше бы, конечно, её ещё уменьшить.

[Даниил Конев]

Сергей Сергей, Спасибо, работает! Я почему думал, что после псевдо-класса уже нельзя ставить теги:))) Вопрос решен.

Answer 1

[Айрат]

Ну тогда hover ставьте не на a а на li