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 Preben Finnøy Olafsen
Preben Finnøy Olafsen
3,459 Points

Social Buttons, :hover = Text

Hey guys,

Currently working on a small webproject of mine. And also just for learning sake im trying to figure this out.

Basically I have a social media button. However, I want text to appear on the website when they hover above the social media buttons. For example twitter.. Somebody hovers over the twitter button, the webpage changes the state of a piece of text to visible that says something "Tweet us!".

My code is terrible, and Im really bad at organizing it. So Im sure it going on a stretch asking you guys for help however all help is appreciated!

http://codepen.io/fishingjoker/pen/vGJmjg

1 Answer

Niilo Smeds
Niilo Smeds
12,540 Points

If you reorganize your html a bit, you can accomplish this with a descendant selector:

.social-icon:hover > .h3 {
  visibility: visible;
}

See my pen for an example: http://codepen.io/nsmeds/pen/grxRyE

More on CSS combinators: http://www.w3schools.com/css/css_combinators.asp

Preben Finnøy Olafsen
Preben Finnøy Olafsen
3,459 Points

Thanks man!

Exactely what I needed, appreciate it!

Preben Finnøy Olafsen
Preben Finnøy Olafsen
3,459 Points

Thanks man!

Exactely what I needed, appreciate it!