CSS - Change Fill Color on Hover - SVG PATH

Question

im using the modern ui icons pack in my project using the svg path.

what i try to do is to change the fill color on hover .

but i have no success..

hope someone help me out with this .

Thanks in advance.

Code:

<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

You can overwrite svg fill color via css like below and also target different elements like <path> polygon circle etc.

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