Change Color of SVG mobile hamburger icon on Hover-CodePudding

I am trying to change the mobile hamburger menu icon to fit the color of my logo when the mouse is over -

<a href="#"> 

<svg >
   <use xlink:href="#menu-hamburger"></use>
</svg> 

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <defs>
       <symbol id="menu-hamburger"  viewBox="0 0 16 16" style="width: 16px; height: 16px; color:#FFF;">
            <rect y="1" width="16" height="2"></rect>
            <rect y="7" width="16" height="2"></rect>
            <rect y="13" width="16" height="2"></rect>
       </symbol>
   </defs>

</svg> 

</a>

i used this CSS code

    .menu-hamburger:hover {
      fill: #FFB400!important;
    }

but still no luck

CodePudding user response：

Try this.

svg.menu-hamburger :hover {
      fill: #FFB400!important;
    }

<a href="#"> 

<svg >
   <use xlink:href="#menu-hamburger"></use>
</svg> 

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <defs>
       <symbol id="menu-hamburger"  viewBox="0 0 16 16" style="width: 16px; height: 16px; color:#FFF;">
            <rect y="1" width="16" height="2"></rect>
            <rect y="7" width="16" height="2"></rect>
            <rect y="13" width="16" height="2"></rect>
       </symbol>
   </defs>

</svg> 

</a>