svg are somewhat tricky. I have some social icons with svg code and when I tried to color change on hover effect, it didn't want to change the color. My svg code looked like this.
<svg aria-hidden="true" width="30px" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
<path class="social-icon contact-icon" d="M19.9,2H4.1C3,2,2,3,2,4.1v15.7C2,21,3,22,4.1,22h6.1v-6.8H7.5V12h2.8V9.6c0-2.8,1.7-4.3,4.2-4.3c1.2,0,2.5,0.2,2.5,0.2v2.7
h-1.4c-1.4,0-1.8,0.9-1.8,1.7V12h3.1l-0.5,3.2h-2.6V22h6.1c1.2,0,2.1-1,2.1-2.1V4.1C22,3,21,2,19.9,2z" />
</svg>
CodePudding user response：
When you have path inside the svg tag just like me, you need to indicate the path to make it change the color.
So the css that solved my issue was:
svg:hover .social-icon {
fill: #color
}
CodePudding user response：
svg:hover{fill: red}<svg aria-hidden="true" width="30px" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
<path class="social-icon contact-icon" d="M19.9,2H4.1C3,2,2,3,2,4.1v15.7C2,21,3,22,4.1,22h6.1v-6.8H7.5V12h2.8V9.6c0-2.8,1.7-4.3,4.2-4.3c1.2,0,2.5,0.2,2.5,0.2v2.7
h-1.4c-1.4,0-1.8,0.9-1.8,1.7V12h3.1l-0.5,3.2h-2.6V22h6.1c1.2,0,2.1-1,2.1-2.1V4.1C22,3,21,2,19.9,2z" />
</svg>