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 How to Make a Website Customizing Colors and Fonts Use Classes in CSS

Posted by Heather Tsai
Heather Tsai
1,374 Points

pseudo classes

If classes such as "selected" and "hover" are custom-named, how does the program know when to trigger the class? How does it know that an arrow hovering over a link is equal to the "hover" class?

2 Answers

Ian de Jesus
Ian de Jesus
8,559 Points
Ian de Jesus
Ian de Jesus
8,559 Points

pseudo classes such as selected and hover are pre-defined in the CSS syntax which means they are not custom-made and are latched on to classes before them. e.g. .a:hover {style;} will implement the style when you hover to any anchor element.

You have to declare which element will have a pseudo class of hover similar to the example I have written above to target the element which is the link you are describing.

More examples would be .main-logo:hover{background:red;} will make the element's background with class main-logo to red.

Dave Berning
Dave Berning
17,365 Points
Dave Berning
Dave Berning
17,365 Points

I don't quite understand the question. You cannot add classes of hover to an element and make behave like that. You need to add the pseudo class of :hover in your CSS. There are other pseudo class such as :target which is used when getting into more advanced CSS like off-canvas navigation.

li a:hover { /* pseudo classes need to 'touch' the element */
     color: red; /* link turns red on hover */
}

If you don't want a hover effect on an element you could also use CSS to change the cursor to imply a clickable link. This is usually used on various divs that you want to indicate to the user that, that <div> is clickable or will do something.

#some_div { 
     cursor: pointer; /* changes cursor to the 'hand' */
}

The first example is the correct way to make links hover and you should use that. The latter is an example of implying something that is clickable or interactive.