How to put a different color on SVG in the li tag when hovering on li or a?

Question

css

How to put a different color on SVG in the li tag when hovering on li or a ?

Skeleton html structure:

<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>

I put this style: But the color changes only when you hover over the SVG itself, but you need it when you hover over li or a ... How to do it? For example, when you hover over a menu item, the text changes color, everything is fine, but you need the svg to change color when you hover over any area li a Example, in the menu on the right of the site: https://fabrika-decora.weblh-test. en/
.h_nav_list li a svg:hover {fill: #9167C9;}


.h_nav_list li a:hover

Answer 1

Well then put hover not on abut onli