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

Ricardo Granda
Ricardo Granda
6,288 Points
Posted by Ricardo Granda
Ricardo Granda
6,288 Points

HTML 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
STAFF
Nick Pettit
Treehouse Teacher
Nick Pettit
Nick Pettit
Treehouse Teacher

Hi 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
Ricardo Granda
6,288 Points
Ricardo Granda
Ricardo Granda
6,288 Points

Hi 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
Nick Pettit
Treehouse Teacher
Nick Pettit
Nick Pettit
Treehouse Teacher

Cheers, Ricardo! Experimentation is always a good thing. :)