aタグhover時に子要素も同時にカラーを変更させたい

Question

以下の画像をhover時にアイコンとテキストを同時にカラーを変更したいです。

アイコンの上にカーソルを合わせるとアイコンとテキスト両方同時にhoverで指定したカラーになります。

しかし、テキストにカーソルを合わせた際はテキストしかhoverで指定したカラーになりません。

コードは以下のように書いています。

<li class="show-menuーitem">
    <a id="rectangle_112" class="show-menuーitem__link" href="#">
        <svg class="show-menuーitem__icon" xmlns="http://www.w3.org/2000/svg" width="24"
            height="24" viewBox="0 0 24 24">
            <g id="グループ_2505" data-name="グループ 2505" transform="translate(-36 -106)">
                <g id="rectangle_112" data-name="長方形 112" transform="translate(36 106)"
                    fill="none" stroke="#fff" stroke-width="3">
                    <rect width="24" height="10" stroke="none" />
                    <rect x="1.5" y="1.5" width="21" height="7"
                        fill="none" />
                </g>
                <g id="rectangle_112" data-name="長方形 113" transform="translate(36 120)"
                    fill="none" stroke="#fff" stroke-width="3">
                    <rect width="24" height="10" stroke="none" />
                    <rect x="1.5" y="1.5" width="21" height="7"
                        fill="none" />
                </g>
            </g>
        </svg>
        ダッシュボード
    </a>
</li>

&__link:hover{
    color: #4BA0F0;
    svg:hover #rectangle_112{ 
        stroke: #4BA0F0;  
    }
}

どうすればaタグclass="show-menuーitem__link" と、svg画像<g id="rectangle_112">をhoverで同時にカラーを変えることができるでしょうか?

Answer 1

svgタグのidをhover:とする事で解決しました。