CODEWITHSUNDEEP
csssvghover
rosa
rosa

Reputation: 31

SVG Color Change on Hover Effect

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>

Upvotes: 0

Views: 926

Answers (2)

Aman Sharma
Aman Sharma

Reputation: 964

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>

Upvotes: 0

rosa
rosa

Reputation: 31

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
}

Upvotes: 2

Related Questions