Cassy Cassy - 4 years ago 127
CSS Question

svg circle hover only works on border

I am trying to add some social media buttons that should change color on hover, i have a circle inside an svg tag and when i try to add hover it just works if i put the mouse on the "border" of the circle. HereĀ“s the html

<svg>
<circle cx="50%" cy="50%" r="20" fill=#009ddf />
<image x="20%" y="23%" width="30" height="30" xlink:href="images/svg/facebook.svg"/>
</svg>


and the css

svg circle:hover {
fill: red;
}


Can someone tell me how to do hover on the whole circle? already tried doing it on the svg but it has a rectangle where the circle is inside that changes color too. another question is can i make the svg tag round?

Answer Source

I think your problem is the image, your code works properly, but the image inside has no effect.

Check this example:

svg:hover circle {
    fill: red;
}
<svg>
   <circle cx="50%" cy="50%" r="40" fill=#009ddf />
   <image x="45%" y="40%" width="30" height="30" xlink:href="https://en.facebookbrand.com/wp-content/themes/fb-branding/prj-fb-branding/assets/images/thumb-drawn.svg"/>
</svg>

What I've done was apply the hover on the parent instead. I've referenced another image because you did not include it. If you have problems to apply this solution using your image, include it here to let us see what's going on with that particular image.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download