Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Graham Davidson
Graham Davidson
Courses Plus Student 14,966 Points

SVG Rollover issues

Hi I am trying to use SVG's on this site for the social icon http://www.flourishfoods.co.uk/ However the problem I am getting is on the transition. If you roll over the f or the actual bird themselves the green of the icon does not change. Whereas if you hover the the circle it does. Does anyone know of a way I can make is to no matter where you roll over on the icon the green of the circle will change colour.

Thanks in advance.

G

3 Answers

Gianluca Danieletto
Gianluca Danieletto
19,317 Points
Gianluca Danieletto
Gianluca Danieletto
19,317 Points

Hi Graham,

I guess your problem is caused because you target only the path of the svg. This path however is "empty" inside, meaning the f and the bird part aren't part of the path itself. It's cut-out. This is, why the transition effect doesn't work when your hovering right above these parts.

As a possible solution I'd recommend you to change the hover object to the SVG itself so that it will use the bounderies of the svg-object, not the path itself.

First, make the svg tag in your html selectable (add a class "svg-icon" or whatever you like)

<svg class="svg" ...>
<path class="social-icons" ...>
</path>
</svg>

Next, in your CSS, make it change the color when you hover the svg-object:

.social-icons {
  fill: #00882E; 
  transition-property: fill;
  transition-duration: 0.5s;
}
.svg:hover .social-icons{
  fill: #D2E08B;
}

If this shouldn't work, try to target the a tag for hovering. Hope that helped

Cheers

Gianluca

Graham Davidson
Graham Davidson
Courses Plus Student 14,966 Points

Genius - thank you very much - although I cannot get the transition working now for some reason grrrrr

Gianluca Danieletto
Gianluca Danieletto
19,317 Points

Ok, I forgot about that. Here's a really useful page to get the right selector: w3schools css selectors

Since the path is a direct child of the svg element I'd suggest the + selector or the > selector. ex:

.svg:hover+.social-icons{}
Graham Davidson
Graham Davidson
Courses Plus Student 14,966 Points

Cool thanks for that - will check it out

Stephen Whitfield
Stephen Whitfield
16,771 Points
Stephen Whitfield
Stephen Whitfield
16,771 Points

awesome site.

Graham Davidson
PLUS
Graham Davidson
Courses Plus Student 14,966 Points
Graham Davidson
Graham Davidson
Courses Plus Student 14,966 Points

Thanks Stephen