html - CSS - ホバー時に塗りつぶしの色を変更 - SVG PATH

Question

私のプロジェクトでは、svg パスを使用して最新の ui アイコン パックを使用しています。

私がやろうとしているのは、ホバー時に塗りつぶしの色を変更することです。

しかし、私は成功していません..

誰かがこれで私を助けてくれることを願っています。

前もって感謝します。

コード：

<div id="Main">
   <ul>
      <li>
          <form>
             <button>
                <div class="inner">
                   <svg>
                     <path d="M35.......etc..">
                     </path>
                   </svg>
                </div>
             </button>
          </form>
      </li>
   </ul>
</div

Answer 1

以下のように css を介して svg 塗りつぶしの色を上書きし、<path> polygon circleなどのさまざまな要素をターゲットにすることもできます。

#Main svg:hover {
    fill: #fce57e;
}

#Main svg:hover path {
    fill: #fce57e;
}

#Main svg:hover plygon {
    fill: #fce57e;
}

#Main svg:hover circle {
    fill: #fce57e;
}