以下の画像をhover時にアイコンとテキストを同時にカラーを変更したいです。
アイコンの上にカーソルを合わせるとアイコンとテキスト両方同時にhoverで指定したカラーになります。
しかし、テキストにカーソルを合わせた際はテキストしかhoverで指定したカラーになりません。
コードは以下のように書いています。
HTML
1<li class="show-menuーitem"> 2 <a id="rectangle_112" class="show-menuーitem__link" href="#"> 3 <svg class="show-menuーitem__icon" xmlns="http://www.w3.org/2000/svg" width="24" 4 height="24" viewBox="0 0 24 24"> 5 <g id="グループ_2505" data-name="グループ 2505" transform="translate(-36 -106)"> 6 <g id="rectangle_112" data-name="長方形 112" transform="translate(36 106)" 7 fill="none" stroke="#fff" stroke-width="3"> 8 <rect width="24" height="10" stroke="none" /> 9 <rect x="1.5" y="1.5" width="21" height="7" 10 fill="none" /> 11 </g> 12 <g id="rectangle_112" data-name="長方形 113" transform="translate(36 120)" 13 fill="none" stroke="#fff" stroke-width="3"> 14 <rect width="24" height="10" stroke="none" /> 15 <rect x="1.5" y="1.5" width="21" height="7" 16 fill="none" /> 17 </g> 18 </g> 19 </svg> 20 ダッシュボード 21 </a> 22</li>
SCSS
1&__link:hover{ 2 color: #4BA0F0; 3 svg:hover #rectangle_112{ 4 stroke: #4BA0F0; 5 } 6}
どうすればaタグclass="show-menuーitem__link" と、svg画像<g id="rectangle_112">をhoverで同時にカラーを変えることができるでしょうか?
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。