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!
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
Ricardo Granda
6,288 PointsHTML 5 and SVG : hover and styling
Hi everyone,
Just one question. I have the following code:
<html>
<div id="thumbs-icon">
<svg id="icon-thumb">
<g>
<rect class="rect" width="8" height="5" fill="rgb(102,102,102)" x="0" y="0" > </rect>
<rect class="rect" width="8" height="5" fill="rgb(102,102,102)" x="10" y="0" ></rect>
<rect class="rect" width="8" height="5" fill="rgb(102,102,102)" x="0" y="7" ></rect>
<rect class="rect" width="8" height="5" fill="rgb(102,102,102)" x="10" y="7" ></rect>
</g>
</svg>
<section id="text-thumb">Thumbs</section>
</div>
</html>
and this CSS
#thumbs-icon {
width: 15%;
overflow: hidden;
margin: 0 auto;
cursor: pointer;
}
#thumbs-icon:hover {
color: rgb(255, 51, 153);
}
#icon-thumb {
width: 20px;
height: 15px;
margin-top: 0.5em;
opacity: 1;
float: left;
}
#text-thumb {
width: 40%;
float: left;
font-family: Helvetica, Arial, sans-serif;
font-size: 10px;
margin-top: 1em;
}
There are four rectangles which together compose an icon, and there is a text in the right. What I want is when hovering all the div "thumbs-icon" all the elements change the color: the text and the rects inside the SGV element.
Many thanks! regards! R.
2 Answers

Nick Pettit
Treehouse TeacherHi Ricardo Granda,
I pasted your code into CodePen and fixed it. Here's the link: http://codepen.io/nickpettit/pen/khiGB
To adjust the color of an inline SVG, you need to use the fill CSS property on the rectangle shapes. The color property will only adjust the color of text. However, you need both fill and color if you want to change the SVG and text color. I added two distinct selectors for the hover state so that you can see the difference:
#thumbs-icon:hover g rect {
fill: rgb(255, 51, 153);
}
#thumbs-icon:hover {
color: rgb(255, 51, 153);
}
I should point out that this is a rather strange way to create an icon. Why not just use an .svg image file, a .png file, or an icon font? :)

Ricardo Granda
6,288 PointsHi Nick, many thanks for your support. You are right, It's easier to use an image, but as I'm a newbie I'm testing other possibilities. I found this way in a website, quite strange I must said, but it looked interesting, so I decided to use it in one of my websites. By the way, teamtreehouse.com is quite usefull in order to learn programming. Keep moving forward! Regards,

Nick Pettit
Treehouse TeacherCheers, Ricardo! Experimentation is always a good thing. :)