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

CSS

Posted by Ashish Mehra
Ashish Mehra
Courses Plus Student 3,575 Points

how to target path element

hey i want to change path element color on hover circle element.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -50 400 200">
    <circle class="hammer" fill="#FFD466" cx="200" cy="50" r="90"></circle>
    <path class="hammer-path" fill="#FFFFFF" d="M262,32.9l-6.7-6.9c-1.4-1.4-3.6-1.4-5-0.1l-2.8,2.8l-14.6-15c-7-7.2-20.3-18.5-30.1-16.4
        c-1.6,0.3-5.6,3.1-5.6,3.1l19,19.5l-26.3,25.6l-1.5-1.6c-1.4-1.4-3.6-1.4-5-0.1l-39.3,38.3c-1.4,1.4-1.4,3.6-0.1,5l14.4,14.8
        c1.4,1.4,3.6,1.4,5,0.1l39.3-38.3c1.4-1.4,1.4-3.6,0.1-5l-1.5-1.6l26.3-25.6l8.3,8.5l-2.8,2.8c-1.4,1.4-1.4,3.6-0.1,5l6.7,6.9
        c1.4,1.4,3.6,1.4,5,0.1l17.3-16.9C263.3,36.5,263.4,34.3,262,32.9z"></path>
</svg>

1 Answer

Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

:point_right: You can target the path using the class .hammer-path.

But remember that the color of the shape is set with the property fill (not color).

Also be aware that the area inside the path is not considered by the CSS to be part of the circle. So you need a separate selector for each part.

So if you wanted to make the hammer color red when you hover anywhere over the circle (including over the hammer itself), you could do this:

.hammer-path:hover,           /* When hovering over the hammer... */
.hammer:hover + .hammer-path  /* OR when hovering over the circle... */
{
   fill: red;                 /* Change the fill color to red */
}

Another way to do this would be to put both the circle and hammer into a group, and you would only need one selector targeting the group.